Re: [csswg-drafts] [css-animations-2] Add declarative syntax for starting an animation in response to an input event (#12029)

> My initial thought is that we should specify that animation-trigger-timeline has no effect if the animation trigger is event-based. Even auto seems confusing to me in this context.

Yeah, we need something new here, not a timeline, more like a toggle. We can imagine a timeline as a stateful toggle, like @flackr said in the meeting, and then click sort of a stateless toggle.
I guess one way would be to overload the `-timeline` sub-property here with a new `<toggle>` value, and then have something like a sub-property alias for it - if that's possible, like `animation-trigger-toggle` - just a thought.

Another thing to note is that ranges don't make sense for click. Also need to note that timelines are 1 dimensional. For click you need a hit area, like a rect, and this is something we may want to set per definition - on the source element, rather than per usage - on the target.
With that in mind, we need to think how that is exposed. Do we go with something like insets as `<length percentage>{0,4}`? Or go crazy with something clip-path-style `[<basic-shape>] || <geometry-box>]`?

And then, only left to figure how will the property for the click source definition look like.

> As you say, it should be possible to support repeat, alternate, and state, and I'm hoping that's sufficiently expressive for common use cases. I'm open to other ideas, but my primary motivation for this feature is to enable the compositor-thread fast path and I want to be careful not to defeat it.

Sure thing.

> BTW @ydaniv, if you are interested in getting involved with this proposal, we would be very grateful for your help in drafting a spec PR. Let me know!

Yeah sure, I'm very interested in this proposal. However, I'd like to clear out the basic details of our expectations here. Is it something along the lines of:

```css
#source {
  click-toggle: --my-clicker 20px 20% 10px;
}

#target {
  animation: ... ;
  animation-trigger: alternate --my-clicker;
}
```

OR:

```css
#target {
  animation: ... ;
  animation-trigger: alternate click(15px 2rem);
}
```

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


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

Received on Thursday, 24 April 2025 06:59:28 UTC