React and the Web Animation API - SequenceEffect Apr 5, 2016 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. ... ➦

React and the Web Animation API - GroupEffect Apr 4, 2016 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. ... ➦

React and the Web Animation API - KeyframeEffect Apr 3, 2016 In the last post, we saw the easy way to animate a DOM element by using the new element.animate method. This is useful if you want to play simple animations on a single element, but what if you want to create more complex animations involving multiple elements? Sure, you could set up event listeners to listen for one animation to finish to start the next, but there’s a better way. ... ➦

React and the Web Animation API Apr 2, 2016 The web animation api is coming along and, with the polyfill, is supported in modern browsers. So, it seems like a good time to learn to integrate it into my current favorite front end library, React. But, the WAAPI works directly on DOM elements, which means it’s necessary to get access to them. This can be done in a couple ways. Refs to Rendered Elements If the component renders a DOM element directly, it’s easy enough to get a ref to the element. ... ➦