with @RachelNabors
State of the
Animation
the

RachelNabors.com/archive

All characters appearing in this work are
fictitious. Any resemblance to real
persons, living or dead, is purely
coincidental.

WEB ANIMATION
HAS JUST BEGUN
Flash may be gone, but the era of

Animation is a
visual representation of a
rate of change over time
and space.
1me
loca1on

User Interface
Designers

Relationships Structure Cause & Effect
Anima1on guides users through interac1ons using…

Sco$ E. Hudson and John T. Stasko (1993)
“By offloading interpretation of changes to the
perceptual system, animation allows the user to
continue thinking about the task domain, with no
need to shift contexts to the interface domain. By
eliminating sudden visual changes, animation lessens
the chance that the user is surprised.”

Interac/on
Developers

Animation is coming
(back)

Kinds of
Animation

Sta1c Anima1ons

Stateful Anima1ons

UI credit: codrops.com

Dynamic Anima1ons

Credit: CrowdStrike: Alex Graul, Senior UI Developer

Multiple States
vs.
Dynamic
Animation

Mul1-­‐state
Anima1on

True Dynamic
Anima1on

.loaded-001 .loading-bar { width: 1%; }
.loaded-002 .loading-bar { width: 2%; }
.loaded-003 .loading-bar { width: 3%; }
Ad nauseum.

Declarative
vs.
Reactive

.spinner {
transition: opacity 1s;
opacity: 1;
}
.loaded .spinner { opacity: 0; }
Declara1ve CSS…

window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false);
body.classList.add("loaded");
},false);
spinner.addEventListener("transitionend", removeSpinner, true);
+ Reac1ve JavaScript

Credit: Square: Madelin Woods

Credit: Square: Madelin Woods

I can’t make a physics
engine with that.
This totally
works!

Anima/on Library
Developers

greensock.com/gsap

VelocityJS.org

And then we can
release it to the public?
Sure, right after
we catch up on
client work!

Animation History
The Fall of
Flash

?

THE WEB
ANIMATION API
the Greatest API You’ve Never Heard of
an

Anima/on Spec
Authors &
Implementors

youtube.com/watch?v=9aKAQ3OTxUU

But does
it have…
• Performant anima6ons
• Mo6on Paths
• Callbacks
• Nes6ng & sequencing
• Pause, play, reverse, seek

• Performant anima6ons
• Mo6on Paths
• Callbacks
• Nes6ng & sequencing
• Pause, play, reverse, seek
Well, actually,
it does!

codepen.io/rachelnabors/pen/zxYexJ

I think I looked at it once.
It was kinda long,
wasn’t it?
Web Animation API?
What’s that?
Meh. It’s been
a few years.

Support

birtles.github.io/areweanimatedyet

It’s “under
consideration.”
…

Will no one think
of the tablets?

github.com/web-­‐anima1ons

github.com/web-­‐anima1ons

Performance

engineering.flipboard.com/2015/02/mobile-­‐web

Frame rate
is an accessibility
issue.
Think of the
accessibility!

• Web Anima6on API anima6ons geEng their own
thread!*
• *So long as the anima6on doesn’t 6e into any
things happening on the main thread like:
• JavaScript (sorry dynamic anima6on)
• Layout
• It varies by vendor.
An end to jank (some condi1ons apply)!

csstriggers.com

• Reflows are a rendering engine problem.
• opacity & transform remain safest bet
• Browsers keep trying…
• See also: Google’s Project Ganesh and Mozilla’s
Servo
Ge]ng around layout

• The CSS property will-change is a start
• Promotes things to their own layer
• The end of translateZ(0)
Shortcut through the GPU

FORWARD
Pushing the web (anima@ons)

Browser support
and performance!Tools!
We need a
timeline!
The standardistas
need to come down
from their ivory towers!
Show them
how well it
performs!

What would you
know about our
problems?
Why won’t you give
us a chance?

Animation is coming,
whether we’re ready
or not.

Here’s the plan.

User Interface
Designers
• Don’t be afraid of JavaScript
• Take 6me to play with the
libraries

Interac/on
Developers
• Check out the polyfill’s page
• Give feedback

Anima/on Library
Developers
• Go read the spec
• Give feedback

Anima/on Spec
Authors &
Implementors
• Find be[er ways of taking
feedback
• Meet us in the field

Everyone.

–John Lasseter, CCO Pixar
“The art challenges the technology, and
the technology inspires the art.”

We are not our tools.

You can talk to me.
Special Announcement

Ongoing coverage at WebAnima6onWeekly.com
@RachelNabors | RachelNabors.com
rachelnabors.com/waapi
#waapi