A First Look at Scroll-Triggered Animations

Chrome has shipped scroll-triggered animations, and is the first browser to do so. If you update to Chrome 146 , you can view the demo below, where the background of a square fades in over the duration of 300ms , but only once the whole element is within the viewport. CodePen Embed Fallback This is a bit different to how scroll- driven animations work, so in this article I’ll compare them, and then show you how scroll-triggered animations work. Scroll-triggered animations vs. scroll-driven animations Scroll-triggered animations play for a fixed duration once a certain scroll threshold has been surpassed. (Think JavaScript’s Intersection Observer API but for CSS animations.) This differs from scroll-driven animations, where animation progression is synchronized with scroll progression ( animation-timeline: scroll() ) or the degree of intersection ( animation-timeline: view() ), and thus has no duration. Basic scroll-triggered animation example The key part is timeline-trigger: view() instead of animation-timeline: view() , which waits for the element to be within the threshold instead of measuring how much it’s within it and doing something accordingly. However, let’s start with the actual @keyframes animation, which sets the background : /* Define the animation */ @keyframes fade-bg-in { to { background: currentColor; } } It’s set on the .square over the duration of 300ms : .square { /* Declare animation */ animation: fade-bg-in 300ms; } By default, CSS animations trigger when the declaration is applied, but in the expanded snippet below, timeline-trigger overwrites that behavior. Now the animation triggers when the element comes into view() . The --trigger is simply a dashed ident that acts as an identifier for the trigger, whereas entry 100% exit 0% is a timeline range. A timeline range specifies the scroll zone in which the animation activates and is allowed to remain active. In this case, the animation triggers when the bottom edge of the .square enters the ( en