Scroll-Driven Animations

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

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