Scroll-Driven Animations are a bit closer to usable now that Safari has them in Technical Preview and Firefox has them behind a flag. Chrome has released them.

Saron Yitbarek has been blogging about it for Apple, and it’s nice to see. Apple hasn’t ever been super big in the “we make educational content for web development in general” department but maybe that’s changing. I like how Saron lays scroll-driven animations out:

What I like about this framing is that it underscores that the target and the timeline can be totally different elements. They also have no particular requirements for where they live in the DOM. A rando <div> that scrolls can be assigned a custom timeline name that some other totally rando <section> elsewhere animates to. It’s just a freeing thought.

There is also this important thing to know about scroll-driven animations: there are two kinds. One of them is animation-timeline: scroll(); where the timeline is simply how far the element has scrolled and the other is animation-timeline: view(); where the timeline is all about the visibility of the element in the viewport (browser window). The later is maybe a little more fun and interesting in general, for fancy designs. And it’s got a bit more you need to learn about, like animation-range. Again Saron Yitbarek has a new article out about it: A cheatsheet of animation-ranges for your next scroll-driven animation. There are a bunch of keywords for it, thankfully, and Saron explains how they work.

Me, I finally got a chance to look at Bramus’ If View Transitions and Scroll-Driven Animations had a baby, which is a bit of a mind blowing concept to me. They feel like very different ideas, but, then again, a View Transition is essentially a way to define and animation you want to happen, and scroll-driven animations could be the way the view transition progresses. It’s still weird: like how could a scroll position affect the state of the DOM?? You should probably watch Bramus explain in the video/slides linked above, but I couldn’t resist poking at it myself on a recent stream.

Are you a little leary of using scroll-driven animations because of the browser support? Well Cyd Stumpel has some things to say about that in Two approaches to fallback CSS scroll driven animations.

Scroll-driven animations are set to land in all major browsers by the end of the year, but I haven’t seen many people using them in production yet.

They aren’t in Interop 2025 or anything, but with all three major engines having at least flagged implementations, it shouldn’t be too long. But there will always be a long tail of people on browsers that don’t support them, so what then? Cyd nicely explains two approaches: progressive enhancement and graceful degradation. These concepts are often hard to explain the difference between, so this is a great example. Those two links just now? Pens that show off the concepts perfectly.

I’ll leave you with Amit Sheen going buck wild on sticky headers that do fun things with scroll-driven animations, like the text in the header typing itself out (and then back).