Synching Animation Clocks with the Web Animation API

This demo was made for my post on Smashing Magazine about where web animation is headed. It uses a polyfill to enable the Web Animation API. (Psst: Check out the JavaScript and CSS to see how it's done.) To learn more about the Web Animation API, check out my WAAPI resource page!

Cats animated with
CSS Animations

Currently, it is impossible to synch two separate animations with CSS animations. Try adding new cats animated with CSS below. Notice that they do not run in synch with each other.

Cats animated with the
Web Animation API

But with the Web Animation API, you're able to set the startTime value across animations to properly synch them. When you add cats with the Web Animation API, they run lockstep!