Re: [csswg-drafts] [web-animations-2] Custom effects (#6861)

Thanks for pointing me to this thread, @flackr.

I’m currently building a demo that uses a scroll-driven animation on an `input[type=range]`. The progress of that SDA is then used to rotate a 3D element on the page in response. You can try it out in Chrome Canary with the Experimental Web Platform Features flag enabled: as you drag the slider, the 3D model rotates: https://codepen.io/bramus/pen/VwoYoLR

One thing I found missing while building this is having `progress` event on the `Animation` itself to hook this all onto. Yes, I can read the animation’s progress, but I need a trigger for when to read it.

Right now, I rely on the input’s `input`+`change` events to read the animation progress. While using these two events in this case here works, my reflex as an author is to listen to the animation’s progress instead as my brain is in animation mode, not in input mode. Would such a progress event be available, I can easily take the animation + listener and attach it to some other input mechanisms in CSS _(such as a regular `ScrollTimeline`)_ without needing to set up other JS listeners for other types of events _(such as `scroll`)_.

Using a `CustomEffect` would be possible here, but that would require me to create a `CustomEffect` in JS on top of the already CSS existing animation. This feels like a lot of extra work just to get notified of an already existing animation’s tick.

I believe a `progress` or `update` event on the animation would be a more convenient way for authors to achieve what I want to do here.

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


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

Received on Thursday, 26 September 2024 18:26:54 UTC