Scroll-driven Animations

[ramiy]

Description

These scroll-driven animations are currently supported only on one browser engine. It's an amazing feature that reduces a lot of JS, and I personally would love to use it in production websites when all browsers support this feature.

Specification

https://drafts.csswg.org/scroll-animations/

Open Issues

No response

Tests

https://wpt.fyi/results/scroll-animations

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

https://groups.google.com/a/chromium.org/g/blink-dev/c/RDKAi9JPHwY/m/Ee9A5LbBAwAJ
mozilla/standards-positions#347
WebKit/standards-positions#152

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

https://chromestatus.com/metrics/css/timeline/popularity/725
https://chromestatus.com/metrics/css/timeline/popularity/726
https://chromestatus.com/metrics/css/timeline/popularity/727
https://chromestatus.com/metrics/css/timeline/popularity/750

https://chromestatus.com/metrics/css/timeline/popularity/665
https://chromestatus.com/metrics/css/timeline/popularity/740
https://chromestatus.com/metrics/css/timeline/popularity/741
https://chromestatus.com/metrics/css/timeline/popularity/742

https://chromestatus.com/metrics/css/timeline/popularity/728
https://chromestatus.com/metrics/css/timeline/popularity/729
https://chromestatus.com/metrics/css/timeline/popularity/730
https://chromestatus.com/metrics/css/timeline/popularity/731

https://chromestatus.com/metrics/css/timeline/popularity/762

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[BearCooder]

Some examples:

• https://twitter.com/bramus/status/1701576910621311043

• https://twitter.com/bramusblog/status/1702826156313936251

• https://www.frontend.fyi/v/css-scroll-driven-animations

[thebabydino]

About a dozen more pure CSS examples:

• scroll-triggered image reveal & zoom - reveal & zoom out of image once its parent figure has been scrolled into view to a certain extent (this was created as a pure CSS version of a JS-heavy demo I came across)
• header slide effect on scroll - different palette depending on how far we've scrolled
  
• scroll-triggered animation - scrolling all the way to the end makes an animation start playing, while scrolling a bit back up again pauses it (basically toggles the animation-play-state value depending on whether we've scrolled all the way to the end on not)
• invert text on scroll - how much of the page is inverted depended on how far we've scrolled
  
• flip through animal book on scroll - a remake of a 10+ year old demo I once made and which used many invisible hover triggers to flip through the book (as clever as I thought this was at the time, I now think it's an awful idea, please don't do this, there are better ideas if you want to flip through the book depending on mouse position and not on scroll)
  
• char by char reveal on scroll - a remake of something I saw on the Toblerone website, where it was done by wrapping every letter in a div (which I thought was quite awful) and using JS
  
  
• hue rotate on scroll - selectively desaturating the page background-image and then rotating the hue of what's not desaturated + a few other subtle effects as we scroll (pure CSS, single image source version of this demo); meta demo, "dummy" text explains what's happening there
  
• 3D globe axis tilt on scroll
• 🐌 shrink - scrolling reveals the text, updates the percentage value and spiral shrinks the image (pure CSS version of this JS-heavy demo)
  
• diagonal scroll reveal - no JS version of this demo
  

Also on the topic of diagonal scroll, I made this meta demo, whose example text explains what's happening there. This demo uses JS, though that's because of shape-outside being tied to floats and not because of the scroll.

---

There are a lot more scroll-driven demos I coded over the years that could use a pure CSS remake with scroll-driven animations, but I haven't had the time to go through all...

[kizu]

I did write today a post about which proposals from Interop 2024 I'd want to see go forward the most, and this one was in the first place. And I totally forgot that I wanted to provide here a list of articles I (and others) wrote about scroll-driven animations, which show the number of things they make possible:

My articles:

1. “Future CSS: Wishes Granted by Scroll-driven Animations”
2. “Fit-to-Width Text” 
3. “Position-Driven Styles”
4. “Scroll-Driven State Transfer”
5. And a smaller blog post “Scroll-Driven Animations in Stable Chrome”

Articles by others I did save links to (there were more, so only what I have at hand right now):

• “Scroll-persisted State” by @johannesodland
• “Detect if an element can scroll or not” by @bramus
• “Style an element based on the active Scroll Direction and Scroll Speed” also by @bramus
• “Control Pixel Art Sprites With CSS Scroll-Driven Animations” by @jbasoo

[jgraham]

How much do people want the CSS-only parts of scroll timelines vs the JS API (i.e. ScrollTimeline and ViewTimeline)? I haven't looked at all the demos here, but the ones I looked at seem to mostly use just CSS features, suggesting those might be higher priority? The proposal itself currently covers both the CSS and JS parts equally.

[ryantownsend]

@jgraham personally, being able to remove a widespread class of dependency on (often poorly-optimised) JavaScript and replace it with simple pure CSS is a huge win for the web, so I see the CSS side of scroll timelines as more pressing.

[ydaniv]

@jgraham the Web Animations part of SDA also has a huge part here. Today all these effects are done via JS, so having a JS API as a drop-in replacement is also super important.
For example, to sync non-CSS APIs e.g. canvas and video.
So even if the declarative part probably has a higher demand, the imperative part is still much needed!

[wpt-interop]

Thank you for proposing Scroll-driven Animations for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.