Web Animations Resources

The Web Animations API provides powerful primitives to describe imperative animations from JavaScript - but what does that mean? Find out about the resources available to you, including Google’s demos and codelabs.

Background

At its core, the API provides the Element.animate() method. Let’s see an example, which animates the background color from red to green-

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

This method is supported in all modern browsers, with a great polyfill fallback (more on that later). Native support for this method - and its player object - became widely available as part of Chrome 39. It’s also natively available in Opera, and is under active development for Firefox. This is a powerful primitive that deserves a place in your toolbox.

Note! For a primer on the different approaches to animation on the web, including Web Animations, check out Modern Animation Fundamentals on YouTube and Animations on Web Fundamentals.

Codelabs

A growing number of codelabs are available for the Web Animations API. These are self-paced guides that demonstrate different concepts in the API. In most of these codelabs, you’ll take static content and enhance it with animation effects.

These codelabs, and related links or resources, are the absolute best place to start if you’re looking to understand the new primitives available to you in Web Animations. For an idea of what you might build, check out this Android-inspired reveal effect-

So if you’re just getting started, then look no further!

Demos

If you’re looking for inspiration, be sure to check out the Material-inspired Web Animations Demos, with source hosted on GitHub. These demonstrate a variety of amazing effects and you can view each demo’s source code inline.

The demos include a colorful spinning galaxy, rotating Earth, or even just a variety of effects on a plain old element.

Polyfill

To ensure great support across all modern browsers, you can use a polyfill library. The Web Animations API has a polyfill available right now that brings it to all modern browsers, including Internet Explorer, Firefox, and Safari.

If you’re feeling adventurous, you can use the web-animations-next polyfill, which also includes features that are yet to be finalized - such as the composable GroupEffect and SequenceEffect constructors. For a comparison between the two polyfills, please see the homepage.

To use either polyfill in your code, you have a few options.

1. Use a CDN, such as cdnjs, jsDelivr, or target a specific release via rawgit.com

2. Install via NPM or Bower

   $ npm install web-animations-js $ bower install web-animations-js

In all cases, you can simply include the polyfill in a script tag before any other code-

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
  document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
  ], 1000);
</script>

Other resources

If you’d like to read a more technical introduction, please check out the W3C spec.

Dan Wilson has also written a great set of posts on Web Animations, including on how to use it alongside the new CSS motion-path property. For some samples using motion-path, check out Eric Willigers’ doc.