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.

KeyframeEffects

A 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.

var elem = document.getElementById('toAnimate');
var timings = {
  duration: 1000,
  fill: 'both'
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var effect = new KeyframeEffect(elem, keyframes, timings);

GroupEffects

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.

See the Pen zGeVey by Dan Wilson (@danwilson) on CodePen.

A 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.

var elem = document.getElementById('toAnimate');
var elem2 = document.getElementById('toAnimate2');
var timings = {
  duration: 1000
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
];
var group = new GroupEffect(kEffects);
document.timeline.play(group);

SequenceEffects

Similar to the GroupEffect, 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 GroupEffect and SequenceEffect together (such as having a grouping of multiple sequences).

See the Pen vNYQLL by Dan Wilson (@danwilson) on CodePen.

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:

var sequence = new SequenceEffect(kEffects);
document.timeline.play(sequence);

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 element.animate() works:

var elem = document.getElementById('toAnimate');
var timings = {
  duration: 1000,
  fill: 'both'
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

elem.animate(keyframes, timings);

Using the same variables as above, the following is equivalent using the Animation constructor:

var kEffect = new KeyframeEffect(elem, keyframes, timings);
var player = new Animation(kEffect, elem.ownerDocument.timeline);
player.play();

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: