Web Animations API

The Web Animations API was something that I grossly misunderstood after hearing about it.

Can't you already animate stuff using JavaScript? Haven't we be doing this in jQuery forever?

But the Web Animations API, WAAPI for short, will be (it's currently a working draft) a big step forward for ergonomic, performant animations on the web. WAAPI provides a standard way to tap into CSS keyframe animations from your JavaScript. In most cases, sticking to CSS animations has been the only way to maintain acceptable frame rates while making your elements whoosh across the screen. Plus, animating with CSS generally leaves the main thread unblocked (with notable exceptions), allowing your app to continue to run critical JavaScript and respond to user input. However, with the introduction of WAAPI, you can achieve similar results using JavaScript!

While writing keyframes in CSS can be more declarative and is still preferable for simple scenarios, using WAAPI gives you the full power of JavaScript for your animations and provides total, dynamic control over the animation process, allowing you to orchestrate complex, multi-element animations in ways that are difficult with CSS.

Let's get into come code.

Getting Started

Here's a basic entrypoint into the Web Animations API:

const keyframes = [
  { transform: 'scale(1)' }
  { transform: 'scale(1.1)' }
]
const timeline = { duration: 1000, easing: 'ease-out' }
document.getElementById('alert').animate(keyframes, timeline)

I'll highlight a couple things:

• The main WAAPI function is Element.animate()
• Element.animate() takes two parameters a Keyframe Object and an EffectTiming Object
• We are not specifying any percentages or from/to keywords for our keyframes, WAAPI will automatically space your keyframes evenly depending on how many objects you pass. You can override this by passing an offset property e.g. { transform: 'scale(1.1)', offset: 0.3 } where 0.3 is 30% of the animation's timeline.

Going Further

Not too bad, right? While the example above could be achieved easily with CSS, how would you go about pausing and playing the animation on demand? Or dynamically changing the playback rate? These are the use cases where WAAPI shines. A great example is the demo at the top of this page; notice how the animation updates on the fly when we change parameters, even when changing the animated properties.

When you call Element.animate() you get back an Animation object that gives you control of and insight into that particular animation. This allows for idomatic interactions like animation.pause() or animation.reverse() and a look at the current state of a given Animation with properties like animation.currentTime and animation.playState. Additionally, an Animation object can have event handlers, such as onfinish, allowing you to chain together multiple time-based animations. These kinds of primitives unlock awesome potential for the creative and effectual use of CSS animations, in a way that is accessible to those are varying skill levels.

What will you create with the new Web Animations API? If you felt inspired to make something after reading, feel free to send me a Codepen (or similiar), I might feature it at the bottom of this article! Go forth and animate 🧙‍♂️.

Resources

• MDN reference
• Can I Use?