# Introduction
Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of scroll-driven animation is an animation that is linked to an element's position within its scroll container. With it, for example, elements can fade-in as they come into view.
The classic way to achieve these kinds of effects is to respond to scroll events on the main thread. This makes creating performant scroll-driven animations that are in-sync with scrolling impossible or very difficult. Thanks to the Scroll-driven Animations specification, you now have access to new APIs and concepts that enable declarative scroll-driven animations that work in conjunction with the existing Web Animations API (WAAPI) and CSS Animations API.
By having scroll-driven animations integrate with these two existing APIs, scroll-driven animations can benefit from all advantages these APIs bring. That includes the ability to have these animations run off the main thread. Yes, read that correctly: you can now have silky smooth animations, driven by scroll, running off the main thread … and all that with just a few lines of extra code – What's not to like?!
# Demos
⚠️ Your browser does not support Scroll-Linked Animations so these demos will not work. Please use Chrome 115 or newer.
Use the ℹ️ icon on each demo page to know more about how that specific demo was created. Several demos come in multiple versions. To switch versions, hit the 🔀 icon.
Reading Progress Indicator
Show a progress bar at the top of the page that indicates how far down you have scrolled.
CSS version JS versionCarousel Step Indicator
Show a progress bar in a horizontal image gallery, indicating which image you are currently viewing.
CSS version JS versionReverse-Scrolling Columns
A center column that scrolls, surrounded by two columns that scroll in the opposite direction.
CSS version JS versionCover Card to Fixed Header
Transform a full page cover card to a fixed header as you scroll down
CSS version JS versionFly-in Fly-out Contact List
Translate and fade entries as they enter/exit a scroller.
CSS version JS versionCover Flow
Recreation of a famous effect where you can flick through a list of album covers
CSS version JS versionHorizontal Scroll Section
A horizontal strips scrolls by as you scroll vertically.
CSS version JS version# Tools
Scroll Timeline Progress Visualizer
Go to toolView Timeline Progress Visualizer
Go to toolView Timeline Ranges Visualizer
Go to tool# Links and Resources
- Article “Animate elements on scroll with Scroll-driven animations”
- Video “What's new in web animations”
- Scroll-driven Animations Specification (
scroll-animations-1) - Scroll-driven Animations Explainer
# Help?!
Enable Debug Mode to see information about the attached scroll-driven animations.
Debug Mode: active inactive (toggle)