Ready for Developer Testing: Scroll Triggered Animations

[Chromestatus]

Contact emails

awogb...@google.com

Explainer

https://github.com/explainers-by-googlers/scroll-triggered-animations

Specification

https://drafts.csswg.org/css-animations-2/#animation-triggers

Design docs

https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/README.md

Summary

This feature adds scroll-position-based control of animations, e.g. playing, pausing, and resetting. A common pattern on pages across the web is to kick off an animation when a scroll position is reached. Developers often do this by using JavaScript to manually detect that an element is within its scroll container's viewport and to kick off a corresponding animation (e.g. perhaps sliding that element into view). Many of such use cases are based on information that can be provided declaratively. This feature gives authors the ability to create such interactions declaratively via CSS, allowing the user agent to offload the handling of this interaction to a worker thread. The API also includes JavaScript interfaces that allow the feature to be extended to web animations in addition to CSS animations.

Blink component

Blink>CSS

Web Feature ID

Missing feature

Risks

Interoperability and Compatibility

No information provided

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1315)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/576)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=scroll-animations%2Fanimation-trigger

DevTrial instructions

https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/DEV_TRIALS.md

Flag name on about://flags

No information provided

Finch feature name

No information provided

Non-finch justification

No information provided

Requires code in //chrome?

False

Tracking bug

https://crbug.com/390314945

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5181996801982464

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAA6pwF6yEmATfHMv4RCp%2B6F_ufem%2Bt3%3D4maF15ySCKGXfCxb3w%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

[David Awogbemila]

I omitted the Estimated milestones. It is testable in M144.