1. @RachelNabors
.com

2. AirBnBApp

3. airbnb.com

5. AmazonCartApp

6. amazon.com

8. DuolingoApp

9. duolingo.com

11. the web in motion
with @RachelNabors

12. 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

13. The High Road through
the Brain’s GPU

14. !me
loca!on
Animation is a
visual representation of a
rate of change over time.

19. We can use anima6on to indicate an element’s…
Direction Solidity Momentum

20. Relationships Structure Cause & Effect
These combine to reinforce…

22. RachelNabors.com

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

24. InnerSanctum,1948

25. DropdowncourtesyofCodrops.

28. In-betweening
From anima7on, extrapola7ng between
two key frames.

30. What just
happened?

32. ScottE.HudsonandJohnT.Stasko
(1993)
“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.”

38. WindowsCEMobilePhoneUI

39. TouchPhone…with…stylus…

41. Animacy
How “alive” something appears to be.

42. It’sAlive!AnimateMotionCaptures
Attention(2010)
“(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.”

45. If you want someone to
notice something, make it
bright and jiggly.

46. cracked.com/article_15239_the-5-most-
annoying-banner-ads-internet_p5.html

48. Animacy and our Cone of Vision

50. When everything vies for
our attention, nothing
commands our attention.

51. A Brief History of Web Animation

53. Birth of SMIL, 1999
SMIL

54. Birth of CSS Animations and Transitions, 2009
CSS
Transi6ons
CSS
Anima6ons

56. CSS
Transi6ons
CSS
Anima6ons
SMIL
Seriously?
Internet Explorer’s Reaction

57. One API to Rule Them All
CSS
Transi6ons
CSS
Anima6ons
SMIL
?

58. Some years later…

59. ?
Web
Anima6ons
API
CSS
Transi6ons
CSS
Anima6ons
SMIL

60. CSS
Transi6ons
CSS
Anima6ons
SMIL
?
Web
Anima6ons
API
la mort de SMIL, 2015

61. cdpn.io/MwYMJe

62. cdpn.io/GZpREz

63. cdpn.io/PNYGZQ

64. rachelnabors.com/waapi

65. Support for the Web Animations API
Let’s do this.
Well, if you’re
serious.

66. github.com/web-animations/web-animations-js

67. The
Impact of Motion on the Web

68. Firefox’stoolsat
DevToolsChallenger.com

69. Chrome’sanimaRontooling

70. 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

72. mojs.io

73. snapsvg.io

74. d3js.org

75. threejs.org

76. greensock.com

78. ibm.com/design

79. LightningDesignSystem.com

81. Storyboards

82. StoryboardforFerdinandtheBulltakenatthe
DisneyFamilyHomeMuseum

83. Internal use storyboard for
DevToolsChallenger.com

84. Mystoryboardtemplate
goo.gl/PyBXI7

85. Animatics

86. “An animation is worth a
thousand meetings.”

87. SpaceUnicornanimaRcusedwithpermission
ofBrianneDrouhardaka@potatofarmgirl

88. loadingspinnerideafromlunch

89. Animatics are NOT deliverables.

90. Prototypes

91. invisionapp.com

92. principleformac.com

93. framerjs.com

94. Moving Forward

97. alovelikepi.com

98. google.com/design/spec/motion

100. DuolingoApp

101. duolingo.com

102. Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors
.com