Scroll-driven animation
An animation whose progress is tied to scroll position rather than time, advancing as the user scrolls.
Scroll-driven animations replace the time axis with a scroll axis. The animation runs forward as the user scrolls down and backward as they scroll up. Common uses include parallax effects, scroll-progress bars, reveal-on-scroll content, and pinning elements while another part of the page scrolls. CSS now ships native support via `animation-timeline: scroll()` and `animation-timeline: view()`, replacing what used to require IntersectionObserver and JavaScript.
Also called
When to use
- Progress bars that fill as the user scrolls a long article
- Parallax effects and depth illusions
- Reveal-on-scroll animations for entering content
- Pinning a sticky element while a separate region scrolls
When not to use
- Animations that should run regardless of scroll (use time-based)
- Heavy effects on long pages that hurt scroll performance
- Content where motion would distract from reading
Related
Source
CSS Scroll-Driven Animations specification (W3C). `animation-timeline` is supported in Chrome and Edge; Safari and Firefox are tracking. Before native support, libraries like GSAP ScrollTrigger were the standard.