React and the Web Animation API - GroupEffect

Last time, I briefly went over KeyframeEffects and using one in a React component. I kept it brief because, on its own, there’s no benefit to using a KeyframeEffect instead of element.animate. But this time, we’re going to see one of the reasons they’re useful by looking at a new part of the WAAPI, the GroupEffect.

GroupEffects

So far we’ve only seen single animations acting on individual elements. GroupEffects provide a convenient way to control multiple animations at the same time.

To create one, we need to use the new GroupEffect constructor which will, hopefully someday soon, be available in the browser, but for now is in the polyfill. The constructor takes an array of effectss as an argument. The great part is, this effect array can contain both KeyframeEffects and other GroupEffects.

const groupEffect = new GroupEffect([
    new GroupEffect([
        new KeyframeEffect(element1, keyframes, timing),
        new KeyframeEffect(element2, keyframes, timing),
    ]),
    new KeyframeEffect(element3, keyframes, timing),
]);

Now we can now use the GroupEffect to create a single animation to control every KeyframeEffect.

const animation = new Animation(groupEffect);
animation.play();

Using GroupEffects in React

After the last two posts, the following pen shouldn’t be too surprising. It renders multiple buttons with social media icons, saves refs to them, and then generates KeyframeEffects for each of them. The KeyframeEffects are then grouped up into a single animation using a GroupEffect.

See the Pen 360 Animated Menu on CodePen.

Play around with it and see what you can come up with. That’s it for this post, next time we’ll add SequenceEffects to the mix and see how we can combine everything to make more complex animations.