![Page 1: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/1.jpg)
@RachelNabors .com
![Page 2: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/2.jpg)
AirB
nB A
pp
![Page 4: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/4.jpg)
![Page 5: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/5.jpg)
Amaz
on C
art A
pp
![Page 7: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/7.jpg)
![Page 8: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/8.jpg)
Duo
lingo
App
![Page 10: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/10.jpg)
![Page 11: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/11.jpg)
the web in motion with @RachelNabors
![Page 12: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/12.jpg)
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
![Page 13: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/13.jpg)
The High Road through the Brain’s GPU
![Page 14: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/14.jpg)
!me
loca!o
n
Animation is a visual representation of a rate of change over time.
![Page 15: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/15.jpg)
![Page 16: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/16.jpg)
![Page 17: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/17.jpg)
![Page 18: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/18.jpg)
![Page 19: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/19.jpg)
We can use anima6on to indicate an element’s…
Direction Solidity Momentum
![Page 20: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/20.jpg)
Relationships Structure Cause & Effect
These combine to reinforce…
![Page 21: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/21.jpg)
![Page 23: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/23.jpg)
Jump Cut
From film, when the camera cuts directly to a different perspec7ve.
![Page 24: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/24.jpg)
Inne
r San
ctum
, 194
8
![Page 25: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/25.jpg)
Dro
pdow
n co
urte
sy o
f Cod
rops
.
![Page 26: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/26.jpg)
![Page 27: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/27.jpg)
![Page 28: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/28.jpg)
In-betweening
From anima7on, extrapola7ng between two key frames.
![Page 29: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/29.jpg)
![Page 30: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/30.jpg)
What just happened?
![Page 31: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/31.jpg)
![Page 32: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/32.jpg)
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.”
![Page 33: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/33.jpg)
![Page 34: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/34.jpg)
![Page 35: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/35.jpg)
![Page 36: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/36.jpg)
![Page 37: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/37.jpg)
![Page 38: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/38.jpg)
Win
dow
s CE
Mob
ile P
hone
UI
![Page 39: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/39.jpg)
Touc
h Ph
one…
with
… st
ylus
…
![Page 40: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/40.jpg)
![Page 41: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/41.jpg)
Animacy
How “alive” something appears to be.
![Page 42: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/42.jpg)
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.”
![Page 43: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/43.jpg)
![Page 44: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/44.jpg)
![Page 45: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/45.jpg)
If you want someone to notice something, make it
bright and jiggly.
![Page 46: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/46.jpg)
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
![Page 47: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/47.jpg)
![Page 48: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/48.jpg)
Animacy and our Cone of Vision
![Page 49: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/49.jpg)
![Page 50: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/50.jpg)
When everything vies for our attention, nothing
commands our attention.
![Page 51: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/51.jpg)
A Brief History of Web Animation
![Page 52: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/52.jpg)
![Page 53: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/53.jpg)
Birth of SMIL, 1999
SMIL
![Page 54: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/54.jpg)
Birth of CSS Animations and Transitions, 2009
CSS Transi6ons
CSS Anima6ons
![Page 55: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/55.jpg)
![Page 56: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/56.jpg)
CSS Transi6ons
CSS Anima6ons SMIL
Seriously?
Internet Explorer’s Reaction
![Page 57: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/57.jpg)
One API to Rule Them All
CSS Transi6ons
CSS Anima6ons SMIL
?
![Page 58: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/58.jpg)
Some years later…
![Page 59: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/59.jpg)
?Web Anima6ons
API
CSS Transi6ons
CSS Anima6ons SMIL
![Page 60: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/60.jpg)
CSS Transi6ons
CSS Anima6ons SMIL
?Web Anima6ons
API
la mort de SMIL, 2015
![Page 65: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/65.jpg)
Support for the Web Animations API
Let’s do this.
Well, if you’re serious.
![Page 66: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/66.jpg)
git
hu
b.co
m/w
eb-a
nim
atio
ns/
web
-an
imat
ion
s-js
![Page 67: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/67.jpg)
The Impact of Motion on the Web
![Page 69: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/69.jpg)
Chro
me’s
ani
maR
on to
olin
g
![Page 70: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/70.jpg)
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
![Page 71: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/71.jpg)
![Page 77: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/77.jpg)
![Page 80: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/80.jpg)
![Page 81: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/81.jpg)
Storyboards
![Page 82: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/82.jpg)
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
![Page 85: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/85.jpg)
Animatics
![Page 86: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/86.jpg)
“An animation is worth a thousand meetings.”
![Page 87: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/87.jpg)
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
![Page 88: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/88.jpg)
load
ing
spin
ner i
dea
from
lunc
h
![Page 89: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/89.jpg)
Animatics are NOT deliverables.
![Page 90: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/90.jpg)
Prototypes
![Page 94: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/94.jpg)
Moving Forward
![Page 95: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/95.jpg)
![Page 96: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/96.jpg)
![Page 99: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/99.jpg)
![Page 100: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/100.jpg)
Duo
lingo
App
![Page 102: The Web in Motion: animation's impact on UI and web design](https://reader034.vdocuments.site/reader034/viewer/2022042723/588735c31a28abc0748b5d7b/html5/thumbnails/102.jpg)
Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors .com