Scroll-driven · 1.5
Native CSS scroll-driven animation
The scrollbar is the playhead, wired straight into the compositor.
Keyframe progress linked to scroll position or to an element's own visibility. Zero JavaScript.
4 knobs
How it actually works
Every other scroll feature in this catalog is a rAF loop pretending to be a timeline. This one is a real timeline. It cannot jank the page, because there is no page code to jank: the compositor holds the animation and the scroll offset in the same place.
Two timeline types. animation-timeline: scroll() ties progress to a scroller's overall travel, for progress bars and reading indicators. animation-timeline: view() ties progress to the element's own intersection with the scrollport, for reveals. animation-range scopes which slice of that travel actually drives the animation. No scroll listener exists. Nothing runs on the main thread.
The knobs, named
Timeline type, animation-range window, and the keyframes. The range window is the one to turn: it is the clearest demonstration of "scroll as a timeline" anyone will ever see.
| Knob | Source | What it teaches |
|---|---|---|
| Timeline type | sourced | view() = tied to this element crossing the scrollport. scroll() = tied to the whole scroller's progress. |
| Range start | sourced | Where in the element's travel the animation begins. |
| Range end | sourced | Where it finishes. Narrow the window and the same keyframes become urgent. |
| Keyframes | sourced | The animation itself. The timeline does not care what it drives. No blur option on purpose: House Standard rule 4 forbids animating it, and a scroll timeline is not an excuse. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (fetched MDN)
Property names verbatim from the MDN scroll-driven-animations guide. Corroborated independently by craft-web.md against the same spec.
- Seen on
- MDN's own examples. Conflict adjudicated in the index: awwwards.md called this "increasingly the modern-site default"; craft-web.md rendered 16 canon sites and found 0 hits. The rendered result is the more grounded claim: the platform is ready, the industry is not.
- Dependencies
- none
- Difficulty
- trivial for reveals; moderate for anything needing coordination
- Performance
- The big win: runs off the compositor. No scroll listeners, no main-thread IntersectionObserver. It cannot jank the page.
- Accessibility and the floor
- Support is roughly 85% (Chrome/Edge full, Safari limited, Firefox behind a flag as of 2026). Feature-detect with @supports. This page tells you which side of that line your browser is on.
Notes
Composability. It is the free version of the reveal half of everything else here. Use it for reveals; keep the rAF loop for the features that genuinely need state.