Scroll-driven Animations: Animate on Scroll, Not Time
Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.
Why it exists
Traditionally, linking animation to scroll position required JavaScript, often using performance-intensive scroll event listeners or complex IntersectionObserver setups. This approach could be brittle and hard to maintain. Scroll-driven animations provide a declarative, performant, pure-CSS way to create these common effects directly in the browser's rendering engine.
The mental model
Think of a scrollbar as the scrub control on a video player. Instead of an animation playing over a set duration like 3 seconds, its progress is directly mapped to the scroll position. Scrolling down is like fast-forwarding the animation; scrolling up is like rewinding it. The animation's state is determined by how far you've scrolled, not how much time has passed.
How it works
You replace an animation's default time-based timeline with a scroll-based one. This is a two-step process. First, you identify a scroll source and give it a name using the scroll-timeline-name property on the scrolling container. Alternatively, you can use the scroll() or view() functions. Second, you tell an element's animation to follow this new timeline using the animation-timeline property. The browser then maps the scroll range to the animation's keyframes, from 0% to 100%.
When to use it
Use this for any effect directly tied to a user scrolling. Common use cases include: first, a reading progress bar at the top of an article that fills as the user scrolls down; second, elements that fade or slide into view as they enter the viewport; third, creating parallax effects where different background and foreground elements scroll at different apparent speeds.
When not to use it
Do not use this for animations that should run independently of user interaction. A loading spinner, a notification that appears and fades out on its own, or a looping background gradient should still use default, time-based animations. Also, be mindful of browser support, as this is a newer CSS feature.
One canonical example
To change an element's background color as its container scrolls, you first define and name the container's scroll timeline. Then, you apply that named timeline to the element's animation. For example, you can create a timeline named --scroller on a main element, and then have a div inside it use that timeline for its animation-timeline. The div's background will then change based on how far the main element has been scrolled.
Interview question
Which animation scenario is LEAST appropriate for implementation using a CSS scroll-driven animation?
- a.A background element that moves at a slower rate than the foreground, creating a depth illusion.
- b.A progress bar at the top of a page that visually fills up as the user scrolls through content.
- c.An image gallery where thumbnails slide into view sequentially as the user scrolls past them.
- d.A small icon that rotates indefinitely to indicate an ongoing background process.Correct
Why? this is the answer
Scroll-driven animations link an animation's progress to the scrollbar's position, making them ideal for effects like progress bars, fade-ins on scroll, and parallax. A loading spinner that rotates indefinitely is an animation independent of user interaction and should use a traditional time-based animation, not a scroll-driven one.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #animation
- #scrolling
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles