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

@DavMila this looks great!

One thing I noticed, if the animation starts with `paused` state, and the triggering element is scrolled into the active range, and then we change animation's state to `running`, the animations isn't aware it's inside the active range of the trigger, so we get a flipped state, for example for `alternate` type. I guess this is expected, considering the trigger doesn't watch the animation's `play-state` and how we defined `alternate` to be a stateless toggle behavior.

I think as an author I'd expect that switching the animation's `play-state` to `running` would also cause the side-effect of applying its associated trigger(s) to apply their effect according to its current state.

This also brings up the question about the specification of the trigger's behaviors for the `alternate` type. I think we should probably specify those more strictly, so that entering primary state for `alternate` will always play "forwards", depending on animation's direction, just as `state` should always play/resume playback and not pause.

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

Regarding multiple triggers per animation, I think this is still not defined good enough to be usable by authors. I think there's different use-cases which expect different behaviors, like:

- Multiple `click` triggers, or combining `view()` and `click`
- Combining two `pointer()` triggers for the x & y axes
- Combining two `view()` triggers for the x & y axes

In some cases you want these to behave as `AND`, and in others as `OR`.
Besides that, this is still not specifiable in the declarative syntax.

I think we should probably start with `animation-trigger` and `Animation.trigger` accepting a single trigger, and perhaps later define something like `trigger-set()` which can accept a list of triggers and return a single trigger value. And then define a similar mechanism for WAAPI.

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


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

Received on Tuesday, 10 June 2025 19:55:07 UTC