🎞️ Scroll-driven animations — no listeners

Scroll the panel below. The top bar is bound to scroll with animation-timeline: scroll(); the cards reveal with view(). Zero JavaScript drives the motion. Change the range to feel each phase — including in & out, which reverses as a card leaves the top.

range

animation-range: entry 0% entry 100%;

↓ scroll me ↓

1Bound to scroll positionnot time — scroll up and it plays backward

2view() = IntersectionObserver…that you never had to write

3Runs off the main threadon the compositor — no jank

4animation-range picks the phaseentry · contain · exit

5One CSS ruleno observers, no classList toggles

6Progressive enhancement@supports guards it; old browsers just skip

Now scroll back up — with in & out the cards fade away as they exit.

Your browser doesn't support animation-timeline yet — the whole point of the post! Try the latest Chrome or Firefox, or Safari 18+, to see the demo.