02.1 / SCROLL()
This gallery has no JavaScript
Your vertical scroll is driving horizontal translation through
animation-timeline: --h-scroll, a named view timeline on the tall
wrapper. The mapping is declarative — the compositor runs it off the main
thread, so it can’t jank.
02.2 / VIEW()
Elements that watch themselves enter
Every card on this page fades, rises and un-blurs via
animation-timeline: view() with
animation-range: entry 0% entry 55%. The bar below fills only
while its own box crosses the viewport.
02.3 / PARALLAX
Depth from a single property
These dots share one keyframe, translate: 0 -Npx, over
animation-range: entry 0% exit 100% — each with a different
amplitude custom property. Old-school parallax, minus the scroll listeners.
02.4 / RANGE SYNTAX
Six named ranges, one grammar
entry, exit, cover, contain,
entry-crossing, exit-crossing — percentages inside
animation-range let you choreograph exactly which slice of an
element’s journey drives which animation.
02.5 / THE PROGRESS BAR
Look up
The gradient hairline pinned to the top of the viewport is
animation-timeline: scroll(root) — a reading-progress indicator
in four lines of CSS. If your engine lacks scroll timelines, it politely
disappears instead of breaking.
02.6 / STATUS
Where it stands, mid-2026
Scroll-driven animations shipped first in Chromium, landed in WebKit’s 2025
release train, and Firefox’s implementation is in active rollout. Progressive
enhancement — like the fallbacks on this page — is the sensible pattern
while engines converge.
Baseline · converging