Scroll-Driven Animations

You can give a name (“custom ident”) to any scrolling element’s “timeline”, have a parent element pick it up, then have any other element use it for their own animation timeline. It’s a trip!

If you give a scroll or view timeline a –custom-ident name, then any descendent can “listen” to that timeline and base @keyframe animations off of it.

A rather exceptional CSS trick discovered by Roman Komarov that uses scroll driven animations to resize lines of text to fit exactly to their container.

If you’re creating a scroll-driven animation and the goal is “when the page is scrolling through this general section, animate the children” it’s probably going to involve passing scrolling data through custom properties.

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

Unlike JavaScript, there is no simple built-in method in CSS to access an element’s width and height. But using some (call it hacky) modern CSS techniques, we can get our hands on the number and even use it.

The navigation in this game works with the arrow keys, which is made possible with scroll driven animations, faked collision detection, and maintaining state with CSS custom properties.

A scroll progress indicator is a pretty straightforward thing to build with a scroll()-style scroll-driven animation. But here, we’ll build indicators for each section of a page using the view() style.

If you were going to read one article to get you going with Scroll-Driven Animations from scratch, I think Adam Argyle has the one so far.

Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a –trigger custom property. Via a Style Query, that triggers the actual animation. Why bother? Scroll-driven animation durations are, well… […]