Chrome 145 is set to introduce a fascinating new CSS feature: scroll-triggered animations. This feature allows for time-based animations that activate at particular scroll offsets, providing a distinct experience different from scroll-driven animations, which link animation progress directly to the scroll position.
Scroll-triggered animations are characterized by their use of activation and active ranges to determine when animations should trigger and when they should deactivate. This approach allows animations to continue playing independently once they are triggered, crossing a defined threshold. Consequently, this renders the IntersectionObserver unnecessary for such effects.
The new CSS properties <code>animation-trigger</code> and <code>timeline-trigger</code> are instrumental in these animations, as they enable a declarative implementation. This makes it easier to configure ranges and scope, offering developers greater control over the animation’s behavior as the user scrolls through the page.
For those eager to experiment with this cutting-edge feature, it is currently accessible in Chrome Canary by enabling the Experimental Web Platform Features flag. The full release in Chrome 145 is anticipated in 2026, promising a new way to enhance user interactions with engaging scroll-based animations.

Collections

Chrome 145 will introduce CSS scroll-triggered animations, a new feature that activates time-based animations at specific scroll offsets. Unlike scroll-driven animations that tie progress to scroll position, these animations use activation and active ranges to trigger independently once a threshold is crossed. The feature uses new CSS properties `animation-trigger` and `timeline-trigger` for declarative implementation, eliminating the need for IntersectionObserver. Currently available in Chrome Canary with experimental flags enabled, the full release is expected in 2026.

CSS Scroll-Triggered Animations Arriving in Chrome 145