Intent to Ship: 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/#timeline-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 an animation. 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

Motivation

Kicking off animations after having reached a desired scroll position is a common pattern on the web. Achieving this requires JavaScript to know when to trigger an animation. However, in many cases, all the information needed for many use cases can be declaratively specified. This feature provides authors a robust, reliable, performant and convenient way to set up such animations in response to scrolling.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/8942

TAG review

https://github.com/w3ctag/design-reviews/issues/1167

TAG review status

Pending

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

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/390314945

Availability expectation

Feature is expected to become available on WebPlatform Baseline.

Adoption expectation

We expect the feature to meet the needs of many scroll related animation use cases on the web.

Adoption plan

We plan to work with interested developers (of which we have at least 2 at the moment). We also plan to have a blog post.

Estimated milestones

Shipping on desktop	144
DevTrial on desktop	144
Shipping on Android	144
DevTrial on Android	144
Shipping on WebView	144

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

This feature is also intended to be supported via the web animations API but only the CSS animations spec is up to date. We expect the Web Animations spec to be closely related to the CSS spec/syntax and plan to update the Web Animations spec after addressing any feedback that arises from the CSS spec. We filed CSS working group issue https://github.com/w3c/csswg-drafts/issues/13010 for feedback on the CSS spec.

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5181996801982464?gate=5104214340272128

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
Ready for Trial: https://groups.google.com/a/chromium.org/g/blink-dev/c/Gw42-BxHqcs/m/baT_KRxkAgAJ

This intent message was generated by Chrome Platform Status.