birtles
commented
4 years ago 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
From what I understand, Web Animations do not emit
animationstartandanimationiterationevents 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
onfinishandoncancelevent handlers here: https://www.w3.org/TR/web-animations-1/#dom-animation-onfinishHere 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
animationstartandanimationiterationevents 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.onstartandanimation.oniterationlike I can withanimation.onfinish, but even just being able to listen for the native events would be great too.