Scroll-driven animation (CSS scroll and view timelines)
Motion whose playhead follows page or viewport progress, so the scrollbar controls what frame you see.
See it
What it is
A scroll-driven animation replaces clock time with a scroll progress timeline. A scroll timeline measures a scroller from start to end; a view timeline measures an element's journey through its scrollport. CSS connects either one with 'animation-timeline', so moving the page moves the playhead and scrolling back rewinds it. Chrome shipped it in version 115 in 2023, and it runs on the compositor, which is the practical difference from a scroll listener. This is the native CSS spelling of the general idea filed under scroll-linked animation, which also covers the GSAP ScrollTrigger and Motion for React approaches.
Reach for it when progress should belong to the reader: a reading indicator tied to the document, a product image that turns through a section, or an element that changes as it crosses the viewport. Use 'scroll()' for the scroller's overall progress and 'view()' for one subject's visibility journey.
Gotcha: this is progress-driven, not a one-time trigger. If an effect should fire once when an element enters view, an IntersectionObserver and a normal time-based animation are often clearer. Keep every progress point self-contained too, because a reload, resize, or jump link can place the playhead in the middle with no earlier steps run.
Ask AI for it
Build this as a native CSS scroll-driven animation. Define @keyframes that move the progress bar from 'transform: scaleX(0)' to 'transform: scaleX(1)', set 'transform-origin: left', and attach 'animation-timeline: scroll(root block)' with 'animation-timing-function: linear'. For an element-local reveal, use 'animation-timeline: view(block)' and set an explicit 'animation-range' instead. Under 'prefers-reduced-motion: reduce', remove the timeline animation and show the final state.