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.
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.
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.
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.
~