Introducing scroll-driven-animations.style

Scroll-Driven Animations

The past year I’ve worked together with our engineering team to push Scroll-driven Animations over the finish line. After almost 10 years since the first ideas sprouted, and more than five (!) years in the making to get it into Blink/Chromium, the feature is set to launch in Chrome 115 which will be released to stable this summer.

Silky smooth animations, driven by scroll, running off the main thread … and all that with just a few lines of extra code.

To support this launch, I’ve created scroll-driven-animations.style that gathers all demos I’ve ever built, with more demos on the way.

Recording of me scrolling across scroll-driven-animations.style

Click the CSS or JS buttons to go to the actual demo. 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.

The website also links out to an extensive article covering Scroll-Driven Animations which I wrote, and also to my “What’s new in web animations” video which I recorded for Google I/O ‘23

Visit scroll-driven-animations.style →

~

What I’m especially proud of, is the View Timeline Ranges Tool that allows you see when your animation will run when using them. It’s the tool I was missing myself when I first started out tinkering with View Timelines. Thanks to it, I now clearly understand how they work, and can see what will happen when.

Recording of me using the View Timeline Ranges Tool

Furthermore I’ve also experimented with providing a debugging experience that renders a minimap when enabled. Clicking an item will draw some key lines for the ranges and also show the tracked subject and animated element on the minimap.

Recording of me using the debugger on scroll-driven-animations.style

Both these tools form the basis for future debugging features that will land in Chrome DevTools later this year, to allow you to debug/inspect Scroll-Driven Animations.

~

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.