What is Scroll-driven animation?
Also called: Scroll animations, Scroll-triggered animation
The short answer
Scroll-driven animation ties an animation's progress to scroll position instead of time, so elements animate exactly as far as the reader has scrolled.
Scroll-driven animation, explained
CSS now supports this natively with scroll() and view() timelines, which run on the browser's compositor and stay smooth even when the page is busy.
Older approaches listen to scroll events in JavaScript, which is flexible but easier to make janky.
Questions people ask about Scroll-driven animation
What is Scroll-driven animation?
Scroll-driven animation ties an animation's progress to scroll position instead of time, so elements animate exactly as far as the reader has scrolled.
Related terms
Scrollytelling is telling a story through scrolling: each scroll step reveals, animates or transforms content, so the page plays like a film the reader controls.
Parallax scrollingParallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
GSAPGSAP is a widely used JavaScript animation library for precise, timeline-based motion, including its ScrollTrigger plugin for scroll-linked effects.
View Transitions APIThe View Transitions API is a browser feature that animates between two states of a page, or two pages, by morphing matching elements from one to the other.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.