Intent to Ship: Animation accessor on animation and transition events

[Chromestatus]

Contact emails

fla...@chromium.org

Explainer

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

Specification

https://drafts.csswg.org/css-animations-2/#interface-animationevent

Summary

Adds a read-only animation attribute to the AnimationEvent and TransitionEvent interfaces. This attribute returns the associated Animation object that triggered the event.

Blink component

Blink>Animation

Web Feature ID

Missing feature

Motivation

When handling CSS animation or transition events (such as animationstart or transitionend), developers currently only receive metadata like the animation name or the CSS property name. If they want to programmatically interact with the triggering animation instance (e.g. to pause it, change its speed, or use its .finished promise), they must query the element or document using getAnimations() and filter the results. Providing direct access to the Animation instance via the animation attribute on the event object simplifies developer code, avoids costly DOM queries, and aligns with recent updates to the CSS Animations Level 2 and CSS Transitions Level 2 specifications.

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Goals for experimentation

None

Risks

Interoperability and Compatibility

No information provided

Gecko: Shipped/Shipping

WebKit: Shipped/Shipping

Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/9010)

Other signals:

Ergonomics

The feature is highly ergonomic and straightforward to use. From an animation event you can get the animation to potentially chain promises after, modify, etc.

Activation

As Firefox and Safari have already shipped, Chrome shipping should significantly reduce those activation risks. Developers could detect and polyfill with something like the following: ``` element.addEventListener('animationstart', (event) => { const animation = ('animation' in event) ? event.animation : findAnimationFallback(event); // Use the animation object... }); Making a perfect polyfill can be challenging or impossible - as you have to find the matching animation in element.getAnimations - e.g. if you have the same animation name twice on an element, it is hard to know which of the animations returned by getAnimation the animationstart event is for. However, it can be polyfilled in a way that mostly works using getAnimations.

Security

No security risks, no information is exposed that was not already via getAnimations.

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

This feature arguably will help developers and developer tooling to associate events with animations and link between them.

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/css?label=master&label=experimental&aligned&q=css%2Fcss-animations%2Fanimationevent%20or%20css%2Fcss-transitions%2Fevents-008%20or%20css%2Fcss-transitions%2Ftransitionevent-interface

Flag name on about://flags

No information provided

Finch feature name

AnimationEventAnimation

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/40929813

Estimated milestones

DevTrial on desktop	151
DevTrial on Android	151

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).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6046278267043840?gate=5312243391660032

This intent message was generated by Chrome Platform Status.