Scroll-Driven Animations

You can tell a parent element how many children it has with… scroll-driven animations??

It’s an interesting and potentially useful trick to have an element know where it is on a grid. That’s tricky enough when the items are in one row/column, but what about when they span?

Thanks to some very modern CSS, we can visually replicate the logic of scrollbars. Then make them actually functional.

David Bushell is very sick of the “scroll fade” effect. It’s the effect where, as you scroll down a page, elements slide into place. Often, all the elements. I agree it’s overplayed since it’s usually movement for the sake of it, not adding anything to the experience. It’s true that movement catches our eye, but […]

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

With view() style scroll-driven animations, it’s helpful to think about how you want it to work then tweak the ranges toward that goal.

scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that’s begging for interplay.

It’s quite fun to have an element react to another element scrolling in an unexpected way!

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.