State of the Animation 2014

with @RachelNabors

State of the Animation

2014

TinMagpie.com

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.

-me

loca-o

n

User Interface Designers

Relationships Structure Cause & Effect

Anima-on guides users through interac-ons 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.

Kinds of Animation

Sta-c Anima-ons

Stateful Anima-ons

UI credit: codrops.com

Dynamic Anima-ons

UI credit: CrowdStrike: Alex Graul, Senior UI Developer

Multiple States vs.

Dynamic Animation

Mul--‐state Anima-on

True Dynamic Anima-on

.loaded-001 .loading-bar { width: 1%; }



Ad nauseum.

Declarative vs.

Reactive

.spinner {

transition: opacity 1s;

opacity: 1;

}

.loaded .spinner { opacity: 0; }

Declara-ve CSS…

window.addEventListener("load", function load(event){

window.removeEventListener("load", load, false);

body.classList.add(“loaded”);

},false);

spinner.addEventListener("transitionend", removeSpinner, true);

+ Reac-ve JavaScript

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 ofan

Anima/on Spec Authors & Implementors

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!

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

It’s “under consideration.”

…

Will no one think of the tablets?

github.com/web-‐anima1ons

Performance

• Web Anima6on API anima6ons get 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)!

• Reflows are a rendering engine problem.

• opacity & transform remain safe

• Coming soon! Color, mo6on paths, absolute posi6oning

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

FORWARDPushing the web (animaAons)

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 beVer 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. We build tools…

…together.

( rachelnabors.com/training )

@RachelNabors | RachelNabors.com

rachelnabors.com/waapi #waapi