CSS Scroll-Triggered Animations are coming to Chrome!

~

~

I’m very excited to share that Scroll-Triggered Animations with nothing but CSS are coming to Chrome (and all other Chromium-based browsers) early next year. To introduce you to the topic, I wrote a blog post on developer.chrome.com with the details.

In 2023 we shipped scroll-driven animations that let you advance (or rewind) an animation through scrolling. With scroll-driven animations, animation progress advances from 0% to 100% as you scroll. If you stop scrolling, the animation pauses; if you scroll back up, the animation reverses.

The next chapter for scroll-based animations arrives in 2026, with scroll-triggered animations landing in Chrome 145. These are time-based animations that trigger when crossing a specific scroll offset.

Say goodbye to IntersectionObserver for this type of effect, as you can now do it declaratively in CSS.

The blog post contains a bunch more demos, which you can also find in this CodePen collection. Check them out in Chrome Canary with the Experimental Web Platform Features flag enabled. The feature is expected to ship in Chrome 145.

~

In addition the blog post and its demos, I also spent time creating a visualizer for the ranges used by a timeline-trigger. The thing you have to wrap your head around is that a trigger uses two ranges: an activation range and an active range. When the subject is within the activation range, the trigger gets activated. The trigger then won’t deactivate until the subject is outside of the active range. By default the activation and active ranges are the same, but you can specify different ones as long as the active range encompasses the activation range.

In the recording below, the trigger ranges contain 25% contain 75% / entry 105% exit -5% are visualized. The contain 25% contain 75% range is the activation range, and entry 105% exit -5% is the active range.

More details on this and more demos in the post: CSS scroll-triggered animations are coming! →

~