In the last several posts we’ve looked at the parts of the WAAPI and seen how to add them to React components. This post will introduce the final piece of the WAAPI that I’ll be covering, the SequenceEffect.

SequenceEffects

Like GroupEffects, the SequenceEffect is used to create a single animation from a collection of individual effects. The difference, as you probably figured out from the name, is that the animation effects are executed in sequence instead of in parallel. Creating one will look familiar to anyone who read the last post:

const sequenceEffect = new SequenceEffect([
    new KeyframeEffect(element, keyframes, timing), // 1
    new GroupEffect([keyframeEffectOne, keyframeEffectTwo]),  // 2
    new SequenceEffect([keyframeEffectThree, keyframeEffectFour])  //3
]);
const animation = new Animation(sequenceEffect);

In this imaginary example, playing the animation would play the keyframe effect on line 1 first. When that is finished, the group effect on line 2 would play. Finally, after the group effect finishes, the sequence effect on line 3 would play. At this point, you should be starting to see how we can create some complex animations by creating sequences of groups of sequences of keyframes…you get the idea. So lets play around with it.

Adding SequenceEffects to React

Considering that SequenceEffects and GroupEffects are created in the same way, for the first example I’ll use the same button as last time, but with a SequenceEffect instead. Note: this crashes on chrome if you try to click it a second time to reverse the animation. But it works in firefox and it works in Edge if you don’t use animation.finish.

See the Pen 360 Animated Menu with SequenceEffect on CodePen.

In the next post, I’ll look at potential ways of encapsulating the WAAPI effects into reusable components. For now, enjoy this pen using composed effects.

See the Pen WAAPI Composing Effects on CodePen.