Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@RachelNabors
.com
AirBnBApp
airbnb.com
AmazonCartApp
amazon.com
DuolingoApp
duolingo.com
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 ...
The High Road through
the Brain’s GPU
!me
loca!on
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…
RachelNabors.com
Jump Cut
From film, when the camera cuts directly to
a different perspec7ve.
InnerSanctum,1948
DropdowncourtesyofCodrops.
In-betweening
From anima7on, extrapola7ng between
two key frames.
What just
happened?
ScottE.HudsonandJohnT.Stasko
(1993)
“By offloading interpreta6on of changes to
the perceptual system, anima6on allows the
us...
WindowsCEMobilePhoneUI
TouchPhone…with…stylus…
Animacy
How “alive” something appears to be.
It’sAlive!AnimateMotionCaptures
Attention(2010)
“(T)hese speeded responses appeared to be
due to the perceived animacy of ...
If you want someone to
notice something, make it
bright and jiggly.
cracked.com/article_15239_the-5-most-
annoying-banner-ads-internet_p5.html
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
cdpn.io/MwYMJe
cdpn.io/GZpREz
cdpn.io/PNYGZQ
rachelnabors.com/waapi
Support for the Web Animations API
Let’s do this.
Well, if you’re
serious.
github.com/web-animations/web-animations-js

The
Impact of Motion on the Web
Firefox’stoolsat
DevToolsChallenger.com
Chrome’sanimaRontooling
Sites using CSS anima6ons and transi6ons
• animation 37.2037%
• webkit-animation 39.8729%
• transition 51.0801%
• webkit-t...
mojs.io
snapsvg.io
d3js.org
threejs.org
greensock.com
ibm.com/design
LightningDesignSystem.com
Storyboards
StoryboardforFerdinandtheBulltakenatthe
DisneyFamilyHomeMuseum
Internal use storyboard for
DevToolsChallenger.com
Mystoryboardtemplate

goo.gl/PyBXI7
Animatics
“An animation is worth a
thousand meetings.”
SpaceUnicornanimaRcusedwithpermission
ofBrianneDrouhardaka@potatofarmgirl
loadingspinnerideafromlunch
Animatics are NOT deliverables.
Prototypes
invisionapp.com
principleformac.com
framerjs.com
Moving Forward
alovelikepi.com
google.com/design/spec/motion
DuolingoApp
duolingo.com
Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.co...
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
Upcoming SlideShare
Loading in …5
×

The Web in Motion: animation's impact on UI and web design

1,479 views

Published on

My keynote from Front Trends 2016 in Warsaw was all about where web animation has come from, where it's going, and why it's so important to the future of UI and web design.

Published in: Design
  • Be the first to comment

The Web in Motion: animation's impact on UI and web design

  1. 1. @RachelNabors .com
  2. 2. AirBnBApp
  3. 3. airbnb.com
  4. 4. AmazonCartApp
  5. 5. amazon.com
  6. 6. DuolingoApp
  7. 7. duolingo.com
  8. 8. the web in motion with @RachelNabors
  9. 9. 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
  10. 10. The High Road through the Brain’s GPU
  11. 11. !me loca!on Animation is a visual representation of a rate of change over time.
  12. 12. We can use anima6on to indicate an element’s… Direction Solidity Momentum
  13. 13. Relationships Structure Cause & Effect These combine to reinforce…
  14. 14. RachelNabors.com
  15. 15. Jump Cut From film, when the camera cuts directly to a different perspec7ve.
  16. 16. InnerSanctum,1948
  17. 17. DropdowncourtesyofCodrops.
  18. 18. In-betweening From anima7on, extrapola7ng between two key frames.
  19. 19. What just happened?
  20. 20. 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.”
  21. 21. WindowsCEMobilePhoneUI
  22. 22. TouchPhone…with…stylus…
  23. 23. Animacy How “alive” something appears to be.
  24. 24. 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.”
  25. 25. If you want someone to notice something, make it bright and jiggly.
  26. 26. cracked.com/article_15239_the-5-most- annoying-banner-ads-internet_p5.html
  27. 27. Animacy and our Cone of Vision
  28. 28. When everything vies for our attention, nothing commands our attention.
  29. 29. A Brief History of Web Animation
  30. 30. Birth of SMIL, 1999 SMIL
  31. 31. Birth of CSS Animations and Transitions, 2009 CSS Transi6ons CSS Anima6ons
  32. 32. CSS Transi6ons CSS Anima6ons SMIL Seriously? Internet Explorer’s Reaction
  33. 33. One API to Rule Them All CSS Transi6ons CSS Anima6ons SMIL ?
  34. 34. Some years later…
  35. 35. ? Web Anima6ons API CSS Transi6ons CSS Anima6ons SMIL
  36. 36. CSS Transi6ons CSS Anima6ons SMIL ? Web Anima6ons API la mort de SMIL, 2015
  37. 37. cdpn.io/MwYMJe
  38. 38. cdpn.io/GZpREz
  39. 39. cdpn.io/PNYGZQ
  40. 40. rachelnabors.com/waapi
  41. 41. Support for the Web Animations API Let’s do this. Well, if you’re serious.
  42. 42. github.com/web-animations/web-animations-js

  43. 43. The Impact of Motion on the Web
  44. 44. Firefox’stoolsat DevToolsChallenger.com
  45. 45. Chrome’sanimaRontooling
  46. 46. 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
  47. 47. mojs.io
  48. 48. snapsvg.io
  49. 49. d3js.org
  50. 50. threejs.org
  51. 51. greensock.com
  52. 52. ibm.com/design
  53. 53. LightningDesignSystem.com
  54. 54. Storyboards
  55. 55. StoryboardforFerdinandtheBulltakenatthe DisneyFamilyHomeMuseum
  56. 56. Internal use storyboard for DevToolsChallenger.com
  57. 57. Mystoryboardtemplate
 goo.gl/PyBXI7
  58. 58. Animatics
  59. 59. “An animation is worth a thousand meetings.”
  60. 60. SpaceUnicornanimaRcusedwithpermission ofBrianneDrouhardaka@potatofarmgirl
  61. 61. loadingspinnerideafromlunch
  62. 62. Animatics are NOT deliverables.
  63. 63. Prototypes
  64. 64. invisionapp.com
  65. 65. principleformac.com
  66. 66. framerjs.com
  67. 67. Moving Forward
  68. 68. alovelikepi.com
  69. 69. google.com/design/spec/motion
  70. 70. DuolingoApp
  71. 71. duolingo.com
  72. 72. Animation belongs to all of us now. Let us set the web in motion together. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com

×