Scroll-driven animations

[ramiy]

Description

Advance animations based on the user's scroll position using CSS. It reduces a lot of JS, replacing them with simple CSS properties: animation-timeline, scroll-timeline, and view-timeline.

Specification

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

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/scroll-driven-animations/

Test Links

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

Additional Signals

Browser Support:

• Chromium: Chrome 115 added full support
• WebKit: Safari 26 will add support
• Mozilla: Behind a flag and has unresolved issues (need to be verified)

Interop:

• 2025: Scroll-driven Animations #439
• 2024: Scroll-Driven Animations #736

Developer signals:

• State of HTML 2024: usage/html_interoperability_features question
• State of CSS 2025: usage/favorite_new_features question
• State of CSS 2025: usage/css_interoperability_features question
• State of CSS 2025: reading_list/reading_list question
• State of CSS 2025: interactions/interactions_pain_points question
• State of CSS 2025: features/all_features question
• State of CSS 2024: usage/css_interoperability_features question
• State of CSS 2024: reading_list/reading_list question
• State of CSS 2024: features/all_features question

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature Scroll-driven animations

• ID: scroll-driven-animations
• Name: Scroll-driven animations
• Description: The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.
• Baseline status: Limited Availability
• Docs: CSS scroll-driven animations
• Standard positions: Mozilla, WebKit
• Chrome use counter: chromestatus.com
• State of CSS/JS/HTML surveys: State of HTML 2024 (usage question), State of CSS 2025 (usage question), State of CSS 2025 (usage question), State of CSS 2025 (reading_list question), State of CSS 2025 (interactions question), State of CSS 2025 (features question), State of CSS 2024 (usage question), State of CSS 2024 (reading_list question), State of CSS 2024 (features question)
• WPT tests: wpt.fyi/results/?q=feature:scroll-driven-animations
• More information: See the web-features explorer

[foolip]

From the survey signals, I think https://2025.stateofcss.com/en-US/usage/#css_interoperability_features is the strongest. Scroll-driven animations is #2 in that list, second only to anchor positioning, which is already included in Interop 2025.

[ydaniv]

Scroll-driven animations also have an imperative interface using the Web Animations API:

• ScrollTimeline: https://www.w3.org/TR/scroll-animations-1/#scrolltimeline-interface
• ViewTimeline: https://www.w3.org/TR/scroll-animations-1/#viewtimeline-interface
• Ranges in Animatable interface: https://drafts.csswg.org/web-animations-2/#the-animation-interface

---

I see that some APIs are still only in draft, probably needs republishing? Maybe WAAPI needs some cleanup before republishing?

@foolip would that be a show stopper? These are already shipped in Chrome since 115, and I believe are also in Safari 26.0.

cc @flackr @fantasai

I can volunteer to help if necessary.

[foolip]

@ydaniv for W3C specs we want them to be on the Recommendation Track, which means at least a First Public Working Draft. Since hhttps://www.w3.org/TR/web-animations-2/#the-animationtimeline-interface doesn't have rangeStart, rangeEnd, or overallProgress we'd either need to get that spec published again, or exclude those bits from the proposal.

[svgeesus]

@foolip working on getting an updated WD

• [web-animations-2] [scroll-animations] Web Animations Level 2 is labeled as "Not Ready For Implementation" and yet is required to implement Scroll-driven Animations w3c/csswg-drafts#11466 (comment)

[graouts]

Should we move the animation-trigger tests to a dedicated top-level directory? As it stands, looking at the numbers for the tests linked in this proposal will not reflect the current level of support by the various browsers for Scroll-driven Animations.

[gsnedders]

Should we move the animation-trigger tests to a dedicated top-level directory? As it stands, looking at the numbers for the tests linked in this proposal will not reflect the current level of support by the various browsers for Scroll-driven Animations.

It seems slightly surprising all the tests for Animation Triggers are in /scroll-animations rather than /web-animations given they're defined in Web Animations (level 2, currently), which has an inline issue:

Should there be any effect of triggers on scroll-driven animations?

This would suggest that any tests related to their effect on Scroll-driven Animations should be tentative — which the overwhelming majority of them are.

And, in general, for Interop, tentative tests are presumed to be excluded.

[ydaniv]

Animation Triggers are defined both in css-animations-2 and web-animations-2.
Initially they only included triggers based on timelines, i.e. Scroll/ViewTimeline, but currently they also include Event Triggers that respond to other UI Events.

They should probably be moved out of /scroll-animations.

which has an inline issue:

Not relevant, they should be moved out anyway, probably into a separate directory.

BTW, @foolip web-animations-2 was republished.

[BorisChiou]

I noticed there is a test related to ident() function defined in [css-values-5]. Should we include this test in this proposal? It depends on other spec and it is not only for scroll-driven animations. It seems it shouldn't be included in our interop test suite. Also, no browser implements it now.

[bramus]

Chrome has ident() implemented behind a flag (which is flipped on during testing). It’d be better if the tests were not using it though, as it’s unrelated to Scroll-Driven Animations.

[emilio]

That test is specific about the ident function so probably easier to just exclude from the interop set.

[wpt-interop]

Thank you for proposing Scroll-driven animations for Interop 2026.

We are pleased to let you know that it has been accepted as part of the Container style queries focus area.

You’ll be able to track progress on this topic throughout the year via the Interop 2026 dashboard.

Posted on behalf of the Interop team.