Scroll-Driven Animations

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… […]

I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see what I mean: The highlighted line is done with a <mark> element in HTML, which feels right. […]

I’ve seen all the excitement about scroll-driven animations. I’m excited too. Animations that use scroll position as a timeline rather than a time-based duration is just a clever idea. It’s something that websites have been using probably-too-much JavaScript for for a long time and it’s nice to see that kind of thing move to CSS […]