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

> 2\. The suggested syntax: `event-trigger-actions: click(play) keypress(pause)`, is a bit problematic since it mixes different concerns together, the event and the action, which should probably be split into different sub-properties. Moreover, I think if we add this format of `<event>()` functions, IMO it makes sense that the arguments they take are modifiers of the events, and not of the trigger.

The suggested syntax, while understandable, also looks a bit weird to me. At least, it would be a first in CSS. As @ydaniv wrote, functions in CSS normally take modifiers.

-----

I have to admit, I don't fully grasp the concept behind all this yet. Nonetheless, I had an idea for a different approach I wanted to share. Maybe that idea is totally wrong and it is definitely still missing important pieces, as I didn't think too deeply about it yet. So feel free to correct me!

# Basic concept

We have trigger events, modifiers for those events, trigger targets, and actions. There are no new properties for animations but instead we have specific scrolling-related events and actions related to animations.

# Syntax

```ebnf
trigger-event = [ none | <event> <number-of-triggerings>? ]#
<number-of-triggerings> = <number [1,∞]>
<event> =
  focus | hover | click |
  [ [ view-enter | view-exit ] && [ <axis> || <'view-timeline-inset'> ]? ] |
  [ [ [ scroll-to | scroll-by ] && [ <scroller> || <axis> ]? ] <length-percentage> ]

trigger-action = [ [ play-animation | play-animation( [ forwards | backwards | alternate ]? ) | pause-animation | toggle-animation | reset-animation | restart-animation ]+ && <trigger-target>? ]#

trigger = <'trigger-event'> / <'trigger-action'>

trigger-target = [ none | <trigger-target> ]#
<trigger-target> = <dashed-ident>
```

where `trigger-event` defines one or more events to react to and `trigger-action` one or more actions to execute on a given trigger target (or itself if none provided) when the corresponding event is triggered.
`trigger-target` turns an element into an event target and defines a name for it, which can then be used in `trigger-action` definitions.

# Example

Animating an element with viewport-based and click-based triggers:

```css
#scroll-subject {
  trigger-event: view-enter 10%, view-exit 90%;
  trigger-action: play-animation --trigger-target, pause-animation --trigger-target;
}

#animation-target {
  animation: …;
  trigger-target: --trigger-target;
}

#click-subject {
  trigger-event: click;
  trigger-action: toggle-animation --trigger-target;
}
```

or using the `trigger` shorthand:

```css
#scroll-subject {
  trigger:
    view-enter 10%, view-exit 90% /
    play-animation --trigger-target, pause-animation --trigger-target;
}

#animation-target {
  animation: …;
  trigger-target: --trigger-target;
}

#click-subject {
  trigger: click / toggle-animation --trigger-target;
}
```

This starts the animation of `#animation-target` when `#scroll-subject` enters the viewport (at 10% offset) and stops it when leaving the viewport (at 90% offset). And it toggles the animation of `#animation-target` when `#click-subject` is clicked.

# Conclusion

This concept keeps trigger events, targets, and actions independent from animations. And it allows for future extensions for events and actions without having to introduce more properties.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12336#issuecomment-3165942865 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 21:58:48 UTC