In a recent talk “Scroll-driven Animations with CSS”, Bramus Van Damme, a Chrome Developer Relations Engineer at Google, took the stage to introduce an exciting new feature in web development: scroll-driven animations. This feature, which allows developers to create animations that respond directly to user scrolling, is set to revolutionise how we think about web interactivity.
Bramus, who has been tinkering with the web since 1997, shared his passion for CSS and web UI, diving deep into the technical aspects of scroll-driven animations. His talk was filled with practical examples, amusing anecdotes, and a clear enthusiasm for the subject. If you missed the live presentation, don’t worry – the video recording and slides are available at the bottom of this post.
What Are Scroll-Driven Animations?
At its core, scroll-driven animation is exactly what it sounds like: an animation that is controlled by the user’s scroll actions. As Bramus explained, “As you scroll the scroll container up and down, the animation scrubs forwards and backwards in direct response. If you pause scrolling, the animation playhead pauses. If you scroll fast, the animation runs fast. If you scroll back, the animation runs back.” This isn’t limited to up and down, either. See the cover-flow demo for a left and right scrolling.
This concept opens up a world of possibilities for web developers, allowing for more dynamic and engaging user experiences without the need for heavy JavaScript libraries.
The Problem with JavaScript-Driven Animations
Before diving into the CSS solution, Bramus highlighted a common issue with JavaScript-driven scroll animations. While it’s possible to create scroll-driven animations using JavaScript, this approach often runs into performance issues because it operates on the main thread. As Bramus pointed out, “The main thread is this magic thing where everything happens on your website. Everything being style computation, layout, paint, input, JavaScript, and so on. And it’s not multi-threaded.”
This means that if the main thread is busy, for example, processing a large JavaScript function, it can’t respond to user input or render animations smoothly.
The solution? Offload the animation to the compositor thread, which is exactly what scroll-driven animations in CSS do. By using CSS animations, which can be composited, developers can ensure smooth, responsive animations that don’t block the main thread.
The Scroll-Driven Animation Specification
The scroll-driven animation specification, which was published in June 2023, provides two key tools for developers: the scroll timeline and the view timeline. These can be used in combination with CSS animations or the Web Animations API (WAPI) to create scroll-driven animations.
Scroll Timeline
A scroll timeline tracks the progress of a scroll container, from the top to the bottom, and maps that progress to an animation. As Bramus explained, “A scroll timeline is a timeline that can track a scroller as you scroll from the start of the scroller to the very bottom of that scroller. And then progress counts up from 0% to 100%.”
Bramus demonstrated how to implement a scroll-driven animation using the scroll() function in CSS. By attaching a scroll timeline to an animation, developers can create effects like a reading progress bar that moves smoothly as the user scrolls down the page.
View Timeline
The view timeline, on the other hand, tracks an element as it enters and exits the viewport. This is similar to the Intersection Observer API in JavaScript, but it’s done entirely in CSS. Animations that trigger when an element comes into view, such as images that grow or shrink as they enter or leave the viewport are now possible with this approach.
One of the most powerful aspects of the view timeline is that it allows developers to animate one element based on the position of another. As Bramus put it, “You could track an image entering, and then you can animate a little logo at the top right, which has nothing to do with the scroll action or the subject. But I think this is powerful, powerful stuff.”
Respecting User Preferences
The importance of respecting user preferences when it comes to motion on the web still applies, perhaps more than ever with this easier implementation. Some users may have motion sensitivity, and it’s crucial to provide a way to tone down or disable animations for these users. This can be done using the prefers-reduced-motion media query in CSS, which allows developers to detect whether the user has requested reduced motion and adjust the animations accordingly.
Debugging Scroll-Driven Animations
Debugging animations can be tricky, but Bramus shared some helpful tools for developers. Chrome DevTools includes an animations panel that allows you to inspect and control animations on the page. Additionally, Bramus has developed a Chrome DevTools extension specifically for scroll-driven animations, which provides a visual representation of the scroll timeline and allows you to edit the start and end values of animations.
The Future of Scroll-Driven Animations
While scroll-driven animations are already available in Chrome and partially in Firefox, there’s still work to be done. Safari currently doesn’t support this feature, and there are ongoing efforts to improve performance and add support for more properties, such as clip-path and background-color, to be animated on the compositor thread.
Bramus also hinted at the possibility of scroll-triggered animations in the future, where an animation is triggered by a scroll event but runs independently of the scroll position. This would allow for even more creative possibilities in web design.
Don’t scroll too fast, though
If you’re excited about scroll-driven animations and want to dive deeper, Bramus has created a wealth of resources to help you get started. His website, scroll-driven-animations.style, includes all the demos from his talk, along with detailed explanations of how they work. There’s also a comprehensive article on developer.chrome.com and a 10-part video series on YouTube that covers everything you need to know about scroll-driven animations. For those who prefer to learn by doing, Bramus’s blog, bram.us, is packed with tutorials and examples of cutting-edge web technologies, including scroll-driven animations.
P.S. We’re very happy to share that Bramus will be returning for WebExpo 2025, with his “Supercharge web UX with view transitions!” talk. Not sure if you’ve detected a theme with Bramus, but he’s on a mission to simplify and enhance the web with pretty cool browser-tech.
🎥 Ready to see it all in action? Watch the video from Bramus’s talk below and start exploring the possibilities of CSS Scroll-Driven Animations for your own projects!