Introducing scroll-driven-animations.style
Introducing scroll-driven-animations.style êŽë š
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.
Video Player
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
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.
Aside
Personally I loved working on this feature, not only because it is a very exciting one, but more so because it is the feature that helped me land my job at Google. Writing about the feature almost 2.5 years ago â the first person to do so â put me on the radar of certain folks within Google; folks I can now call my colleagues and get to work closely with.