Scroll-driven animations

Learn how to create scroll-driven animations for elements on a web page using Scroll Progress Timelines and View Progress Timelines. These new types of timelines, defined in the Scroll-driven Animations Specification, allow for animation linked to the scroll position of a scroll container or to an element's position within its scroll container.

Animations on the web with CSS

CSS animations allow for simple animations on the web, including keyframe animations, transitions, and transforms.

Animations on the web with JavaScript

JavaScript can also be used to create animations on the web, using libraries like Anime.js and GSAP.

Animation timelines

Animation timelines are sequences of keyframe animations that can be linked to elements on a web page.

Scroll Progress Timeline

Scroll Progress Timelines are animation timelines linked to the scroll position of a scroll container along a particular axis.

View Progress Timeline

View Progress Timelines are linked to the relative position of a particular element within its scroll container, allowing for animations that depend on an element's position within the container.

Getting practical with Scroll Progress Timelines

Learn how to create anonymous and named Scroll Progress Timelines in CSS and JavaScript.

Getting practical with View Progress Timelines

Create anonymous and named View Progress Timelines in CSS and JavaScript. Use View Timeline ranges to target specific points in an element's position within a scroll container.

More things to try out

Explore additional features, such as attaching animations to multiple View Timeline ranges with one set of keyframes and attaching animations to a non-ancestor Scroll Timeline.

More demos and resources

Find additional examples and resources for creating scroll-driven animations on the web.