Web Animations API Tutorial Part 3: Multiple Animations
This is Part 3 of an introductory/tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson.
After our discussion on the Animation’s controls and timelines within the Web Animations API, let’s talk about multiple animations.
Multiple Animations Per Element
In this example, each rectangle has three animations applied (affecting transform, opacity, and color). You can call
animate() on an element multiple times, similar to CSS allowing multiple animations.
With the Web Animations API:
With the Web Animations API, this creates three Animation objects that can each be paused, played, finished, canceled, and manipulated via timeline or playback rate.
Animations, Get Them All
So you’ve got an animation kicked off and playing, but you didn’t capture the
Animation reference when you called
animate() on the element. What’s a person to do?
The spec allows for a method
getAnimations() on the document. In the latest version of the spec it is directly on the document (
document.getAnimations()) which is how it is implemented in Firefox 48+. However, as of Chrome 52 and the polyfill (as of v2.2.0), it is implemented according to the old spec which placed it on the new
timeline object on the document.
In the CodePen example, you will see several dots moving with random durations, delays, and transforms with an infinite duration. The ‘Pause All’ button calls
getAnimations() and iterates through all the returned players (one for each animation) and pauses each one.
In the next part, we’ll look at the different ways a WAAPI animation can be created (because there’s more to it than just
document.timeline will make more appearances.
Check out the rest of this series: