[csswg-drafts] [css-animations-2] animation-trigger Name Clash Resolution (#12581)

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

== [css-animations-2] animation-trigger Name Clash Resolution ==
The current direction of #12336 is that animations are associated with triggers via names (dashed idents). I’m filing this issue so that we can resolve on 2 questions:

1. How should name clashes between elements be resolved?
For example:
```
#source1 {
 event-trigger-name: --trigger;
}
#source2 {
 event-trigger-name: --trigger;
}
#target {
 animation-trigger: --trigger;
}
```
Should #target get the trigger on #source1 or on #source2?
In theory we could specify that the above CSS attaches 2 triggers to #target’s animation. However, we’ve resolved in #12399 to allow only a single trigger per animation to start. As such, #target needs to pick one trigger.

Some precedents:
- The anchor position pattern: among elements with the same anchor-name, [the last in tree-order is selected](https://drafts.csswg.org/css-anchor-position/#:~:text=Return%20the%20last%20element%20el%20in%20tree%20order).
- The timeline-scope pattern: where multiple timelines have the same name within a particular scope, that name is considered to [refer to an inactive timeline](https://drafts.csswg.org/scroll-animations-1/#:~:text=declares%20an%20inactive%20timeline).

I think the timeline-scope approach is perhaps limiting so I propose we go with the anchor-name pattern. This would mean that, for example, a bunch of buttons which declare triggers of the same name, only the last one in tree order will be attached to elements declaring animation-trigger of that name. However this problem will be solved when we introduce a trigger-scope property which limits visibility of trigger names similar to [anchor-scope](https://drafts.csswg.org/css-anchor-position-1/#anchor-scope). I can also see the timeline-scope approach being desirable so I’m completely happy to go that way too.

2. How should name clashes between timeline-trigger and event-trigger be resolved?
```
#source {
  event-trigger: --trigger;
  timeline-trigger: --trigger;
}
#target {
  animation: ...;
  animation-trigger: --trigger;
}
```
Does #target’s animation get an EventTrigger or a TimelineTrigger?

I propose timeline-trigger take precedence over  event-trigger because because we can think of a TimelineTrigger as a special case of an EventTrigger which has not just a "primary" (i.e. "start") class of events (enter) but also a "secondary" (i.e. "end") class of events (exit), whereas regular EventTriggers simply have "primary" events, e.g. "click", "keypress", "mouseleave", etc, with which they associate with a specified action. So timeline-trigger should take precedence when both are present and clash on name.
Ultimately it’s a bit of an arbitrary decision but it seems like behavior that should be defined. And I think whichever way we go is fine since this is probably a weird edge case anyway.

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


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

Received on Thursday, 7 August 2025 20:32:52 UTC