[csswg-drafts] [web-animations-2][css-animations-2] animation-trigger CSS syntax (#12652)

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

== [web-animations-2][css-animations-2] animation-trigger CSS syntax ==
In [#12336](https://github.com/w3c/csswg-drafts/issues/12336), we resolved to use separate namespaces for different types of animation triggers, i.e. `event-trigger-*` and `timeline-trigger-*`. We still need to work out what properties/longhands exist within the namespaces.

The conversation continued in [#12611](https://github.com/w3c/csswg-drafts/issues/12611) where, based on [the most recent suggestion](https://github.com/w3c/csswg-drafts/issues/12611#issuecomment-3206927852), `timeline-trigger` would work like this:

In CSS:

```
.source {
  timeline-trigger: --view-trigger view() contain --enter enter;
}
.target {
  animation-trigger: trigger(--view-trigger, --enter play-forwards, exit play-backwards);
}
```

However, after trying to work through the implications of this syntax for JavaScript/IDL, I've realized it might obscure the paired nature of `timeline-trigger`'s "enter" and "exit" concepts by treating them individually, i.e. as if they are no different from discrete `event-trigger` events like `click`, `dblclick`, etc.
In particular, I've thought about what the equivalent CSS & script might look like for `timeline-trigger`.

In JS:

```
let animation = new Animation(...);

let trigger = new TimelineTrigger();

trigger.addAnimation(animation, [
  { action: "enter", behavior: "play-forwards"} ,
  { action: "exit", behavior: "play-backwards"}
]);

```

The last line demonstrates that we would be conceptually treating "enter" and "exit" as unrelated things, so I think we'd be providing authors a somewhat misleading API. Additionally, as [pointed out](https://github.com/w3c/csswg-drafts/issues/12611#issuecomment-3206934900) by @fantasai, having the target specify events/actions it receives might be error-prone.

Two options we have for addressing this:

Brief Summary

1. separate the `trigger()` function accepted by `animation-trigger` into `event()` and `timeline()` functions which have different "signatures", or
2. putting the actions/behaviors within the `event-trigger-*` and `timeline-trigger-*` namespaces.

Details & examples:

Option 1:

```
single-event-trigger: <dashed-ident> [<event-type>]# 
event-trigger: <single-event-trigger> [, <single-event-trigger>]#

<single-timeline-trigger>: <dashed-ident> [<timeline-type>] [<entry-range-block>] [<entry-range-inline>] [<exit-range-block>] [<exit-range-inline>];
timeline-trigger: <single-timeline-trigger> [, <single-timeline-trigger>]#

single-animation-trigger: event(<dashed ident>, <behavior>) | timeline(<dashed ident>, <entry behavior>, <exit behavior>);
animation-trigger: <single-animation-trigger> [<space> <single-animation-trigger>]# [, <single-animation-trigger> [<space> <single-animation-trigger>]# ]#
```
For example:

```
.event_source {
  event-trigger: --click-touch-trigger click touch, --dblclick-trigger dblclick;
}
.event_target {
  animation-trigger: event(--click-touch-trigger, play) event(--dblclick-trigger, pause);
}
.timeline_source {
  timeline-trigger: --timeline-trigger view contain;
}
.timeline_target {
  animation-trigger: timeline(--timeline-trigger, play-forwards, play-backwards);
}
```

Option 2 is the second alternative in [flackr's suggestion from #12336](https://github.com/w3c/csswg-drafts/issues/12336#issuecomment-3133075898)

I've expanded one potential way these options map to IDL/Javascript [here](https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/CSS_to_IDL.md). 


**Proposed Solution:** Option 1.
I think option 1 allows the API to clearly capture the distinction between event triggers and timeline triggers,making use of this feature less error prone and more user-friendly. It also removes the need for higher level events. Compared to option 2, option 1 has the advantage that it specifies `event-trigger` and `timeline-trigger` in a way that isn't tightly coupled with animations, leaving room for potential reuse in non-animation contexts.



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


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

Received on Monday, 25 August 2025 17:04:47 UTC