[web-animations-2] animation (or effect) start and iteration events

[liamdebeasi]

From what I understand, Web Animations do not emit animationstart and animationiteration events like CSS Animations do. Would it be possible to get some clarification as to what the Web Animation alternatives to those should be?

I see there are onfinish and oncancel event handlers here: https://www.w3.org/TR/web-animations-1/#dom-animation-onfinish

Here is an example of what I am referring to: https://codepen.io/liamdebeasi/pen/RwwZpeZ

The top square is animated using Web Animations, and the bottom square is animated using CSS Animations. If you open up the console, notice that animationstart and animationiteration events fire for the CSS Animation square, but not for the Web Animation square.

It would be helpful to know when the animation has started as well as when the animation is iterating from the context of syncing animations with the rest of a user's app. Ideally I would just be able to do animation.onstart and animation.oniteration like I can with animation.onfinish, but even just being able to listen for the native events would be great too.

[birtles]

Good question. The important difference with Web Animations is the distinction between animation and effect.

Animations just provide play control. They don't have a concept of delays or iterations per se. Hence, the events on Animations just relate to play control: finishing and canceling (and replacing).

If we were to add iteration events they would most naturally become a property of the effects instead which is where the iterations, delay, etc. are defined. This would allow, for example, listening only to events on the particular part of a scene you were interested in when group effects are used.

Initially these events were not added because of performance concerns and complications that group effects might introduce. In particular we were concerned about situations such as when a parent group applies a spring/bounce effect that causes a child effect to rapidly oscillate between being active and inactive and dispatching a large number of events as a result.

However, since then we've taken a different approach to the requirements for dispatching events for CSS animations that limits events to 1~2 per animation frame. I think that would address some of the performance concerns we previously had but it would still require some thought (e.g. if a child group was entirely skipped over due to a low frame rate, do we dispatch a start and finish for all of its descendants, even if that child's parent is going to run another iteration? Presumably we do but there might be situations where it is less clear.).

For CSS Animations, which are implemented using in Web Animations using a special animation subclass, CSSAnimation, we fire events based on the state of the applied effect (i.e. the root-most effect in a group effect scenario). If we were to add events to effects, it might be convenient to mirror the events of the root-most effect on the animation too but I'm not sure.

[liamdebeasi]

Thanks for the response. That all makes sense -- I agree now that these events probably should be properties of the effect rather than the animation if they were ever to be added.

Is there a thread where discussions regarding the implementation of Web Animation events are taking place? I did a quick search, but nothing relevant seemed to turned up.

[birtles]

Is there a thread where discussions regarding the implementation of Web Animation events are taking place? I did a quick search, but nothing relevant seemed to turned up.

Sorry, I'm not sure I understand the question. Each of the browser vendors have their own implementation of Web Animation events.

[liamdebeasi]

Sorry, my question was vague. I was interested in knowing if there was a discussion regarding animation iteration and start events in Web Animations happening in another issue, or if it's something that hasn't been the focus of discussion quite yet.

[birtles]

I was interested in knowing if there was a discussion regarding animation iteration and start events in Web Animations happening in another issue, or if it's something that hasn't been the focus of discussion quite yet.

I don't think there has been any discussion about this recently, at least not on GitHub so I'll update this issue to reflect that (and mark it as web-animations-2 since I think this is out of scope for level 1).

The most recently discussion I can recall that overlapped with this at all was #4324 from scroll-animations.