@RachelNabors .com

AirB

nB A

pp

airb

nb.

com

Amaz

on C

art A

pp

amaz

on.c

om

Duo

lingo

App

du

olin

go.c

om

the web in motion with @RachelNabors

The Past, Present, and Future of Web Anima6on

• How anima5on helps our users

• Where has web anima5on been

• And how this impacts how we build the web

The High Road through the Brain’s GPU

!me

loca!o

n

Animation is a visual representation of a rate of change over time.

We can use anima6on to indicate an element’s…

Direction Solidity Momentum

Relationships Structure Cause & Effect

These combine to reinforce…

Rac

hel

Nab

ors.

com

Jump Cut

From film, when the camera cuts directly to a different perspec7ve.

Inne

r San

ctum

, 194

8

Dro

pdow

n co

urte

sy o

f Cod

rops

.

In-betweening

From anima7on, extrapola7ng between two key frames.

What just happened?

Sco

tt E

. Hu

dso

n a

nd

Joh

n T

. Sta

sko

(199

3)

“By offloading interpreta6on of changes to the perceptual system, anima6on allows the

user to con6nue thinking about the task domain, with no need to shiC contexts to the

interface domain. By elimina6ng sudden visual changes, anima6on lessens the chance

that the user is surprised.”

Win

dow

s CE

Mob

ile P

hone

UI

Touc

h Ph

one…

with

… st

ylus

…

Animacy

How “alive” something appears to be.

It’s

Aliv

e! A

nim

ate

Mot

ion

Cap

ture

s A

tten

tion

(201

0)

“(T)hese speeded responses appeared to be due to the perceived animacy of the objects…

We conclude that animate mo6on does indeed capture visual aKen6on.”

If you want someone to notice something, make it

bright and jiggly.

crac

ked

.com

/art

icle

_15

23

9_th

e-5

-mos

t-an

noy

ing

-ban

ner

-ad

s-in

tern

et_p

5.h

tml

Animacy and our Cone of Vision

When everything vies for our attention, nothing

commands our attention.

A Brief History of Web Animation

Birth of SMIL, 1999

SMIL

Birth of CSS Animations and Transitions, 2009

CSS Transi6ons

CSS Anima6ons

CSS Transi6ons

CSS Anima6ons SMIL

Seriously?

Internet Explorer’s Reaction

One API to Rule Them All

CSS Transi6ons

CSS Anima6ons SMIL

?

Some years later…

?Web Anima6ons

API

CSS Transi6ons

CSS Anima6ons SMIL

CSS Transi6ons

CSS Anima6ons SMIL

?Web Anima6ons

API

la mort de SMIL, 2015

cdp

n.io

/Mw

YM

Je

cdp

n.io

/GZ

pR

Ez

cdp

n.io

/PN

YG

ZQ

rach

eln

abor

s.co

m/w

aap

i

Support for the Web Animations API

Let’s do this.

Well, if you’re serious.

git

hu

b.co

m/w

eb-a

nim

atio

ns/

web

-an

imat

ion

s-js

The Impact of Motion on the Web

Fire

fox’s

tool

s at

Dev

To

olsC

hal

len

ger.

com

Chro

me’s

ani

maR

on to

olin

g

Sites using CSS anima6ons and transi6ons

• animation 37.2037%

• webkit-animation 39.8729%

• transition 51.0801%

• webkit-transition 45.6491%

• justify-content 40.0321%

• text-transform 51.9612%

chromestatus.com/metrics/css/popularity

moj

s.io

snap

svg

.io

d3

js.o

rg

thre

ejs.

org

gre

enso

ck.c

om

ibm

.com

/des

ign

Lig

htn

ing

Des

ign

Sy

stem

.com

Storyboards

Stor

yboa

rd fo

r Fer

dina

nd th

e Bu

ll ta

ken

at th

e

Disn

ey Fa

mily

Hom

e M

useu

m

Internal use storyboard for

DevToolsChallenger.com

My s

tory

boar

d te

mpl

ate

goo.

gl/

Py

BX

I7

Animatics

“An animation is worth a thousand meetings.”

Spac

e Un

icorn

ani

maR

c use

d w

ith p

erm

issio

n of

Bria

nne

Dro

uhar

d ak

a @

pota

tofa

rmgi

rl

load

ing

spin

ner i

dea

from

lunc

h

Animatics are NOT deliverables.

Prototypes

inv

isio

nap

p.c

om

pri

nci

ple

form

ac.c

om

fram

erjs

.com

Moving Forward

alov

elik

epi.c

om

goog

le.c

om/d

esig

n/s

pec

/mot

ion

Duo

lingo

App

du

olin

go.c

om

Animation belongs to all of us now.

Let us set the web in motion together.

WebAnimationWeekly.com

slack.AnimationAtWork.com

@RachelNabors .com