Fun with the
Web Animations API

Front Porch 2016

Dan Wilson | @dancwilson


How do we animate on the Web?

  • Straight up setTimeout/setInterval
  • jQuery animate()
  • requestAnimationFrame
  • CSS Transitions and Keyframe Animations
  • SVG Animation
  • Libraries such as GreenSock

Enter the Web Animations API

W3C Editor's Draft

Unite the various SVG/CSS/JS ways to animate

The WAA?

The benefits of SVG/CSS/JS

Off main-thread (hardware acceleration)

Dynamic values

Timelines and playback control


What's available today?

Chrome and Opera have pieces implemented

Firefox soon (currently in Nightly and Dev Editions)

How Chrome is Implementing the API

Polyfill available

Create an Animation

Transitioning from one state to another

var anim = document.getElementById('toAnimate').animate([
    { transform: 'scale(1)' },
    { transform: 'scale(.6)' }
  ], {
    duration: 700, //milliseconds
    iterations: Infinity, //or a number
    direction: 'normal', //'alternate', 'reverse', ...
    fill: 'forwards', //'backwards', 'both', 'none', 'auto'
    delay: 10, //milliseconds
    easing: 'ease-in-out', //'linear', 'ease-in', ...

Create an Animation

Animating multiple frames, multiple properties

var anim = document.getElementById('toAnimate2').animate([
    { transform: 'scale(1)', opacity: 1, offset: 0 },
    { transform: 'scale(.5)', opacity: .5, offset: .333333 },
    { transform: 'scale(.667)', opacity: .667, offset: .666667 },
    { transform: 'scale(.6)', opacity: .6, offset: 1 }
  ], {
    duration: 700,
    iterations: 30,
    direction: 'alternate',
    fill: 'forwards'

Pretty much looks like...

@keyframes emphasis {
  0% {
    transform: scale(1); opacity: 1; }
  33.3333% {
    transform: scale(.5); opacity: .5; }
  66.6667% {
    transform: scale(.667); opacity: .667; }
  100% {
    transform: scale(.6); opacity: .6; }
#toAnimate2 {
  animation: emphasis 700ms linear 0s 3 alternate forwards;

But if it already has an equivalent in CSS...

Keep benefits of CSS, such as hardware acceleration

Variables (vs. Declarative)

Finer control

Player controls

Player Timeline

var anim = element.animate(/* animation */);
anim.currentTime = 200;

Read the current time... or set it to jump

Sync multiple animations together

Max value is delay + (duration * iterations)

CodePen: API Sync

Controls and playStates

var anim = element.animate(/* animation */);
console.log(anim.playState); //"running"

anim.pause(); //"paused";  //"running"
anim.cancel(); //"idle"... jump to original state
anim.finish(); //"finished"...jump to end state

CodePen Demo (Walking Circles)


var anim = element.animate(/* animation */);
anim.playbackRate = .25; //.25x speed

Slow it down or speed it up

currentTime will account for playbackRate

CodePen Demos Walking Circles | Countdown


What are the Catches?

Native browser support ( | Feature Breakdown)

Spec not final / Polyfill changes

Some minor inconsistencies with CSS

Some of the more exciting features are yet to come...

What else is coming?

Get All Animations

In Firefox and Polyfill now, Chrome soon

Get references to all animations

CodePen: Pause All the Dots

CSS Motion Path

Animate along a path!

Chrome has initial support... still a lot to figure out

CodePen Collection

And more...




Grouping & Sequencing

Even timelines that are not related to time (maybe)...

One last demo...

A little game about Falling Letters & Such

(and a CodePen version)

So have we finally done it?

Did we solve all our animation needs?


But let's be thankful for progress... and polyfills... and solid foundations...

Want to know more?

MDN docs from Rachel Nabors

Shop Talk Show: Episodes 216 and 203

Thank you very much!


CodePen: @danwilson

Twitter: @dancwilson

Yes... I was inconsistent with my usernames. I've learned my lesson for the future.