Re: [csswg-drafts] [css-animations-2] Move scroll and event animation triggers to independent namespace (#12336)

While there is no shortage of good suggestions on this thread, I think at this point that most of them are isomporphic, and it's probably time to start looking for consensus.

I don't want to get too deeply into the details, but I have a couple of thoughts on the most recent proposals...

@ydaniv: It is appealing to use a single event/action based model for all animation triggers, but it is an awkward fit. The primary reason is the existence of `exit-range`, which necessitates a bit of trigger state that doesn't map cleanly onto a memoryless event-based model. A fair number of people have now taken the time to dig into the details of this feature, and it seems like a lot of them have intuitively gravitated towards a "bookend" or "matched pair" model for timeline triggers. This suggests to me that making a clear distinction between timeline-based and event-based triggers is likely more ergonomic for developers. In my opinion, the extra syntax required for this distinction is an acceptable price for making the feature easier to grok.

@SebastianZ: In general, I would prefer to reduce/minimize the number of moving parts, and your proposal goes in the opposite direction. I think it's possible to get the expressiveness this feature needs without using CSS functional syntax in an unorthodox way, and without separating out event descriptions into a separate longhand property. For example:

```
# A "click" event performs the "start" action.
event-trigger-actions: click() start;

# A "click" performs the "start" action, a "keydown" performs the "pause" action.
event-trigger-actions: click() start keypress() pause;

# A"click" event or "keydown" event performs the start action.
event-trigger-actions: click() keypress() start;

# A"click" event or "tap" event performs the start action, a "keydown" event performs the pause action.
event-trigger-actions: click() tap() start keydown() pause;
```

For timeline-based triggers, we can use a similar syntax based on the fictional "enter" and "exit" properties, with or without the functional syntax:

```
timeline-trigger-actions: enter play exit pause;

# -or-

timeline-trigger-actions: enter() play exit() pause;
```

These examples are based on the most recent proposal from @flackr, which I support.

The CSSWG face-to-face meeting is next week, and I think it's in the best interest of moving this feature forward to try and reach some consensus in this discussion thread prior to that meeting.

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


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

Received on Tuesday, 12 August 2025 18:14:27 UTC