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

> Just want to underscore this point. It might be awkward/unusual to have multiple timeline-based triggers attached to a single animation, but this seems like a much more natural and useful feature for event-based triggers. Consider a silly example like [cookie-clicker](https://orteil.dashnet.org/cookieclicker/), where there could be multiple click targets that all trigger the same animation; or maybe click targets and also keypress targets. Because event-based triggers are stateless, the behavior of multiple triggers attached to a single animation is coherent and well-defined.

Yeah multiple triggers per animation feels like a more natural fit for event-based triggers, but I think there are some simple scroll-based cases that will benefit from multiple triggers per animation  as well. I've used @flackr 's polyfill to create a [demo](https://davmila.github.io/sta-demos/multitrigger-polyfill/) in which I am simulating two sets of triggers:

(i) `alternate` triggers that fade the images in and out as their corresponding sections are scrolled in and out of view,
(ii) `repeat` triggers that briefly expand the "frame" of the images as the pictures fade into view.

Conceptually, all the triggers in (ii) are acting on the same animation. So I think in addition to event-based trigger cases, there are useful scroll-based cases, perhaps underlining the importance of shaping the CSS API in a way that leaves the door open for allowing the declaration of multiple triggers per animation. With independent namespaces, the implementation in my demo could look like:

```
.frame {
  animation: expand .5s;
  animation-trigger: --trigger1 --trigger2 --trigger3 --trigger4 --trigger5 --trigger6;
}

.section {
  timeline-trigger: view() repeat contain 0% contain 100%;
}

#section1 { timeline-trigger-name: --trigger1; }
#section2 { timeline-trigger-name: --trigger2; }
#section3 { timeline-trigger-name: --trigger3; }
#section4 { timeline-trigger-name: --trigger4; }
#section5 { timeline-trigger-name: --trigger5; }
#section6 { timeline-trigger-name: --trigger6; }
```

or, if we specify that  a name specified in `animation-trigger` will attach every trigger with a matching name (which I think might be unusual use for dash idents), we could have a slightly less verbose implementation:

```
.frame {
  animation: expand .5s;
  animation-trigger: --section-entry-trigger;
}

.section {
  timeline-trigger: --section-entry-trigger view() repeat contain 0% contain 100%;
}
```
though if we do this, it'll  probably be all the more important that we specify a "scope" property to limit the visibility of names.




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


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

Received on Friday, 18 July 2025 17:08:43 UTC