Re: [csswg-drafts] [css-animations-2][web-animations-2] How should AnimationTrigger work? (#12119)

The way I see AnimationTriggers (and how they're currently speced) is a separate object, external to animations, that you attach onto Animations, and it uses the existing Animations' procedures that control playback (playing/reversing/pausing). They don't set anything on the animations, they just trigger the same procedures triggered when `play()`/`reverse()`/`pause()`.

I think we have agreement on how they should work with existing features, as [described above](https://github.com/w3c/csswg-drafts/issues/12119#issuecomment-2842322212). I think we also agree that AnimationTriggers' domain is effects on Animations' playback.

In regard to @DavMila's proposal, I don't think we should be adding imperative API to triggers. IMHO this over complicates the API. But this proposal does build on some features of Triggers that I think we can agree on:

1. Adding a fourth state as I suggested [here](https://github.com/w3c/csswg-drafts/issues/11914#issuecomment-2833295790), and we can agree on naming later.
2. Introduce a "reset" procedure that stops the animation, rewinds it, and holds it in the before phase.
3. Animations should be considered "relevant" if a trigger can potentially activate them in the future - i.e. when they're associated trigger is in `repeat` or `alternate` state.

------------------

Since I envisioned Triggers as a separate entity, it seems weird to me that calling `play()` on an animation with a `null` trigger should throw. And also, I suppose, why I considered triggers to work as option 1 describes it.

But the main question boils down to whether the playback methods produce the same effects as they currently do? Or do they delegate it to the triggers?
I think we should agree first on the behavior, and after that decide the mechanics.

I think we also have an agreement on the following behaviors:

- Effect of `pause()`, as in it should simply freeze the animation in place and also suppress the trigger's effect.
- Effect of `cancel()`, should cancel the animation's effect and suppress the trigger's effect.
- Effect of initial `animate()`/`play()` should delegate to the trigger to apply its effect.
- Effect of `play()` after a pause/cancel should resume/reset the animation and reactivate the trigger's effect.

The questions that remain open are the following behaviors:

- What is the effect of calling a consecutive `play()`?
- What is the effect of calling `reverse()`?

I think after we agree on expected behavior we can move forward to clarify the technical details.

-- 
GitHub Notification of comment by ydaniv
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12119#issuecomment-2855502937 using your GitHub account


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

Received on Tuesday, 6 May 2025 18:15:01 UTC