[csswg-drafts] [animation-triggers-1] Add custom triggers (#13625)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [animation-triggers-1] Add custom triggers ==
The [animation-triggers-1](https://drafts.csswg.org/animation-triggers/) spec currently explains how timeline and event triggers should work. I think that custom triggers is another useful variant that requires little additional api surface and has been requested for some use cases. In particular, you could do the following:

```js
// Create a trigger.
const myTrigger = new CustomTrigger();
// Create as many associated animations as you like.
myTrigger.addAnimation(element.animate({ ... }, { ... }, 'play');
myTrigger.addAnimation(element.animate({ ... }, { ... }, 'play');

// Sometime later, the associated animations can be triggered:
myTrigger.activate();
```
Open questions:
1. Should it be stateful, i.e. enter an activated and deactivated state like timeline triggers, or like event triggers where it does not stay in an activated state and merely triggers the activation behavior. I'm leaning towards non-stateful.

Why is this useful?

The developer can pre-arm important animations ahead of time without knowing exactly when they need to play. The browser can be ready to perform the specific declared animation with minimal delay when it is time to play it. E.g. composited browser could have already created the associated layers and properties. I think this is something we couldn't do with regular animations as unlike regular animations, these would be considered [current](https://www.w3.org/TR/web-animations-1/#current) similar to other triggered animations.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13625 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 10 March 2026 14:22:50 UTC