Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects
This is Part 4 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.
Let’s continue our discussion on multiple animations within the Web Animations API by discussing a few pieces available today in the polyfill to provide grouping and sequencing.
KeyframeEffect takes three parameters: the element to animate, an array of keyframes, and our timing options. These are all parameters we’ve seen before when using
element.animate(). This new object essentially is a blueprint for a single animation and we will see it as we discuss ways to group and sequence animations. It does not start an animation, it just defines one.
Though not available in any native implementation yet, and not even found in the Level 1 spec, the polyfill provides a way to group animations and play them together. The
GroupEffect (yes, it is coming in the Level 2 spec) groups one or more
KeyframeEffects to play simultaneously.
GroupEffect takes an effects parameter where we can pass in our array of
KeyframeEffects representing our multiple animations. Once defined, we can play the group of animations on the default timeline when ready.
Similar to the
SequenceEffects allow us to group together multiple animations (specified by
KeyframeEffects)… but instead of playing them in parallel they play one after the other. You can also, as defined in the polyfill, use
SequenceEffect together (such as having a grouping of multiple sequences).
Sequences give you something that we’ve had to work our way around with CSS or with what we’ve seen with the animations API so far. We would have to maintain delays based on duration of earlier animations or use
finish callbacks. These methods can be hard to maintain and may not be as precise.
Using the earlier variables from the
GroupEffect code segment:
An Alternate Way to Create an Animation
We have previously looked at the
element.animate() way to create animations. This is the quick way to create an animation, play it immediately, and get a reference to the
Animation object. We focused on this first since it has been supported in Chrome for a while now, as well as the polyfill. Firefox is the first to support an alternate way: the
Animation constructor. It shows us one more way to use the
KeyframeEffect, and it is in the Level 1 spec so we should see more use of this soon.
First a reminder of how
Using the same variables as above, the following is equivalent using the
The primary difference here is that the animation does not start playing immediately, so this will be useful when creating animations in advance to be played later.
Wrap Up and Next Time
As the Level 2 spec makes its way through the working drafts, we should see more definition on these different Effects. There are two more planned posts in this series. Next time we will take a look at the future again with what else we can expect to see soon.
Check out the rest of this series: