Design Review #1111

#1111: Declarative Interactions

Opened Jun 11, 2025

こんにちは TAG-さん!

I'm requesting a TAG review of Declarative Interactions.

This CSS provides a declarative syntax, via the CSS 'animation-trigger' property, for specifying that an input event targeting a particular element should start an animation on another specified element. The syntax is designed to make it possible for an implementation to opportunistically start the animation independently of the window event loop, thereby eliminating a significant source of input response delay.

Explainer¹: https://szager-chromium.github.io/declarative-interactions/
Specification: https://szager-chromium.github.io/declarative-interactions/web-animations-2/ https://szager-chromium.github.io/declarative-interactions/css-animations-2/
WPT Tests: N/A (in progress)
User research: N/A
Security and Privacy self-review²: N/A
GitHub repo: https://github.com/w3c/csswg-drafts/
Primary contacts:
- Stefan Zager (@szager-chromium), Google, author
- Phil Rogers (@progers), Google, co-author
Organization/project driving the specification: Google
This work is being funded by: Google
Primary standards group developing this feature: CSSWG
Group intended to standardize this work: N/A
Incubation and standards groups that have discussed the design:
- CSSWG
Multi-stakeholder support³: N/A
Major unresolved issues with or opposition to this specification: N/A
Status/issue trackers for implementations⁴: N/A

Further details:

I have reviewed the TAG's Web Platform Design Principles
Previous early design review, if any: N/A
Relevant time constraints or deadlines: N/A

Demo of the kind of performance problems this feature is meant to eradicate. Try interacting with the form elements in the upper part of the page -- the animations should be smooth. Then check the "inject random jank" checkbox at the bottom and try interacting with the other form controls again; response time will be laggy during periods of main thread jank.

Discussions

Comment by @szager-chromium Jun 23, 2025 (See Github)

@Shrinivassab, I must confess that my framework-fu is very weak, so I can't give you substantial answers about how animation-trigger would combine with Angular, Lit, React, etc.

The spec proposal for animation-trigger does feature a scoping mechanism similar to that used by anchor positioning, which doesn't inherently rely on shadow DOM.

This feature is orthogonal to prefers-reduced-motion and other accessibility settings -- it should not change the rendering of animations.

As for custom gestures: I don't know how those things are implemented, but the proposal is limited to events that use the built-in Event interface and dispatch mechanism. Within that constraint, any event type can be specified, including custom events; but custom events will not get the performance benefits available to standard non-custom events.