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
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
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
const animation = new Animation(groupEffect); animation.play();
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
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.