Fun with the Web Animations API

CSS Summit 2015

Dan Wilson | @dancwilson

Also check out the Web Animations API article series

Today's Focus

Not about why to animate

Why this new API might be useful

Basics of how to use the API

How do we animate on the Web?

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

We can do better!

Enter the Web Animations API

W3C Editor's Draft

Unite the various SVG/CSS/JS ways to animate

WAA?

The benefits of SVG/CSS/JS

Off main-thread (hardware acceleration)

Dynamic values

Timelines and playback control

Callbacks

What's available today?

Browsers have started implementing and exploring

How Chrome is Implementing the API

Polyfill on GitHub (in use on Google's Polymer Project)

Animate an element returning an AnimationPlayer

AnimationPlayer

play(), pause(), finish(), and cancel()

playState

reverse()

currentTime

playbackRate

Create a Player

Transitioning from one state to another state, with transform


var player = 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 a Player

Animating multiple frames, with transform and opacity


var player = 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,
    easing: 'linear',
    delay: 0,
    iterations: 3,
    direction: 'alternate',
    fill: 'forwards'
  });
					

Create a Player

Animating multiple frames, with transform and opacity


var player = document.getElementById('toAnimate2').animate([
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(.5)', opacity: .5 },
    { transform: 'scale(.667)', opacity: .667 },
    { transform: 'scale(.6)', opacity: .6 }
  ], {
    duration: 700,
    easing: 'linear',
    delay: 0,
    iterations: 3,
    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 player = element.animate(/* animation */);
player.currentTime = 200;
					

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

Sync multiple animations together

Max value is delay + (duration * iterations)

CodePen: API Sync

CodePen Collection

Player Controls and playStates


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

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

CodePen Demo (Walking Circles)

Player PlaybackRate


var player = element.animate(/* animation */);
player.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 (caniuse.com)

Spec not final / Polyfill changes

Some minor inconsistencies with CSS

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

What’s Next?

MotionPath

spacing

One Final Demo

Infinite Springs

So have we finally done it?

Did we solve all our animation needs?

No

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

Thank you very much!

Slides: http://danielcwilson.com/talks/2015/animations

CodePen: @danwilson

Twitter: @dancwilson

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