GAINING CONTROL
with the
Web Animations API

QCon 2017, San Francisco

Dan Wilson | @dancwilson

Slides: https://danielcwilson.com/talks/2017/animations

How do we animate on the Web?

  • Straight up setTimeout/setInterval
  • jQuery animate()
  • requestAnimationFrame
  • <canvas>
  • 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 (compositor layer)

Dynamic values

Timelines and playback control

Callbacks

More on that Compositor Layer...

Repainting and reflowing layout

Properties like transform can be animated independently

Like traditional cel animation

What's available today?

Firefox, Chrome, and Opera have foundation implemented

Safari is in development

Edge is under consideration

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 compositor layer

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"
anim.play();  //"running"
anim.cancel(); //"idle"... jump to original state
anim.finish(); //"finished"...jump to end state

CodePen Demo (Walking Circles)

PlaybackRate


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

1x

Events

Callbacks (or in the future, Promises) for `onfinish`, `oncancel`

Can be used for basic sequencing

Or little games (also: CodePen version)

Interacting with multiple animations

Building blocks for other features

Can build a timeline scrubber for multiple animations

Demo: Scrubbing

What are the Catches?

Native browser support (Caniuse.com | Feature Breakdown)

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 Nightly and Polyfill now

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 | More Demos

Demo: Optical Illusions

The composite Timing Option

CSS properties that take multiple values

Subsequent animations on the same property override

composite allows for adding values

Firefox Nightly only currently

Talk of how to get into CSS

Demo: Transforms | Demo: Filter

CSS!

CSS animations can be WAAPI-ified

document.getAnimations() will also get CSS animations and transitions

Access to player controls

Firefox Nightly only currently

Demo

And more...

SetKeyframes

Grouping & Sequencing

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

When to use WAAPI over CSS

Randomized Values (Confetti)

Modifying keyframes (Custom Springs)

Class Toggling-itis (already tying into JS events)

Sequencing

So have we finally done it?

Did we solve all our animation needs?

No

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

Want to know more?

MDN docs from Rachel Nabors

slack.animationatwork.com

uianimationnewsletter.com

Shop Talk Show: Episodes 216 and 203

Web Animations API series

Thank you very much!

Slides: https://danielcwilson.com/talks/2017/animations

CodePen: @danwilson

Twitter: @dancwilson

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