The scroll-timeline CSS property allows an animation’s progress to be driven by the scrolling of an element or the viewport, rather than by time. Instead of an animation running for a fixed duration, its progress is tied to how far a user scrolls, creating effects that feel directly connected to user interaction. This makes it especially useful for storytelling layouts, reveal-on-scroll effects, progress-based animations, and immersive UI experiences where motion responds naturally to scrolling behavior rather than running independently of it.

At its core, scroll-timeline defines a scroll-based timeline that an animation can follow. When paired with properties such as animation-timeline, it allows developers to map animation progress directly to a scroll container or the root scrolling element. As the user scrolls forward or backward, the animation advances or reverses accordingly, creating a strong visual connection between movement and user input. This approach improves perceived performance and clarity because animations only progress when the user interacts, rather than playing automatically.

Another important aspect of scroll-timeline is how it supports modern, declarative animation patterns without relying on JavaScript scroll listeners. This results in smoother animations, better performance, and more maintainable code. When combined thoughtfully with layout and visual design, scroll-driven timelines can guide attention, highlight content transitions, and enhance storytelling without overwhelming the user. In more advanced setups, scroll-timeline can also work alongside related features like view-timeline, allowing animations to respond to when elements enter or exit the viewport, further expanding creative possibilities for scroll-based motion design.