with  @RachelNabors
State of the
Animation
the
RachelNabors.com/archive
All characters appearing in this work are
fictitious. Any resemblance to real
persons, living or dead, is purely
coincident...
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.
1me
loca1on
User  Interface  
Designers
Relationships Structure Cause & Effect
Anima1on  guides  users  through  interac1ons  using…
Sco$  E.  Hudson  and  John  T.  Stasko  (1993)
“By offloading interpretation of changes to the
perceptual system, animati...
Interac/on  
Developers
Animation is coming
(back)
Kinds of
Animation
Sta1c  Anima1ons
Stateful  Anima1ons
UI  credit:  codrops.com
Dynamic  Anima1ons
Credit:  CrowdStrike:  Alex  Graul,  Senior  UI  Developer
Multiple States
vs.
Dynamic
Animation
Mul1-­‐state  
Anima1on
True  Dynamic  
Anima1on
.loaded-001 .loading-bar { width: 1%; }
.loaded-002 .loading-bar { width: 2%; }
.loaded-003 .loading-bar { width: 3%; }
Ad...
Declarative
vs.
Reactive
.spinner {
transition: opacity 1s;
opacity: 1;
}
.loaded .spinner { opacity: 0; }
Declara1ve  CSS…  
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false);
body.classList.add(...
Credit:  Square:  Madelin  Woods
Credit:  Square:  Madelin  Woods
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  of
an
Anima/on  Spec  
Authors  &  
Implementors
youtube.com/watch?v=9aKAQ3OTxUU
But does
it have…
• Performant  anima6ons  
• Mo6on  Paths  
• Callbacks  
• Nes6ng  &  sequencing    
• Pause,  play,  re...
• Performant  anima6ons  
• Mo6on  Paths  
• Callbacks  
• Nes6ng  &  sequencing    
• Pause,  play,  reverse,  seek
Well,...
codepen.io/rachelnabors/pen/zxYexJ
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
birtles.github.io/areweanimatedyet
It’s “under
consideration.”
…
Will no one think
of the tablets?
github.com/web-­‐anima1ons
github.com/web-­‐anima1ons
Performance
engineering.flipboard.com/2015/02/mobile-­‐web
Frame rate
is an accessibility
issue.
Think of the
accessibility!
• Web  Anima6on  API  anima6ons  geEng  their  own  
thread!*  
• *So  long  as  the  anima6on  doesn’t  6e  into  any  
t...
csstriggers.com
• Reflows  are  a  rendering  engine  problem.
• opacity  &  transform  remain  safest  bet  
• Browsers  keep  trying…  
•...
• The  CSS  property  will-change  is  a  start  
• Promotes  things  to  their  own  layer  
• The  end  of  translateZ(0...
FORWARD
Pushing  the  web  (anima@ons)
Browser support
and performance!Tools!
We need a
timeline!
The standardistas
need to come down
from their ivory towers!
Sh...
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  be[er  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.
You  can  talk  to  me.
Special Announcement
Ongoing  coverage  at  WebAnima6onWeekly.com
@RachelNabors  |  RachelNabors.com
rachelnabors.com/waapi
#waapi
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
State of the Animation
Upcoming SlideShare
Loading in …5
×

State of the Animation

5,499 views

Published on

The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly UI frameworks, and JavaScript libraries already exist to handle complex, interactive animations. And now there’s a new API coming to town specifically for web animations! In the wake of so much “CSS vs. JavaScript animation” infighting, you'll be introduced to the Web Animations API via the development styles and insights of four distinct groups of people: UI designers, interaction developers, library authors, and the browser teams implementing it.

Published in: Design
1 Comment
12 Likes
Statistics
Notes
  • When a CSS animation is applied from the beginning of the page load, things are easy. You just use the animation property with appropriate parameters. Animation States are the basic building blocks of an Animation State Machine. Each state contains an individual animation sequence which will play while the character is in that state. When an event in the game triggers a state transition, the character will be left in a new state whose animation sequence will then take over. The default state, displayed in brown, is the state that the machine will be in when it is first activated. You can change the default state, if necessary, by right-clicking on another state and selecting Set As Default from the context menu. http://www.sollylabs.com/ (animation studio)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,499
On SlideShare
0
From Embeds
0
Number of Embeds
1,131
Actions
Shares
0
Downloads
43
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

State of the Animation

  1. 1. with  @RachelNabors State of the Animation the
  2. 2. RachelNabors.com/archive
  3. 3. All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental.
  4. 4. WEB ANIMATION HAS JUST BEGUN Flash  may  be  gone,  but  the  era  of
  5. 5. Animation is a visual representation of a rate of change over time and space. 1me loca1on
  6. 6. User  Interface   Designers
  7. 7. Relationships Structure Cause & Effect Anima1on  guides  users  through  interac1ons  using…
  8. 8. 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.”
  9. 9. Interac/on   Developers
  10. 10. Animation is coming (back)
  11. 11. Kinds of Animation
  12. 12. Sta1c  Anima1ons
  13. 13. Stateful  Anima1ons
  14. 14. UI  credit:  codrops.com
  15. 15. Dynamic  Anima1ons
  16. 16. Credit:  CrowdStrike:  Alex  Graul,  Senior  UI  Developer
  17. 17. Multiple States vs. Dynamic Animation
  18. 18. Mul1-­‐state   Anima1on
  19. 19. True  Dynamic   Anima1on
  20. 20. .loaded-001 .loading-bar { width: 1%; } .loaded-002 .loading-bar { width: 2%; } .loaded-003 .loading-bar { width: 3%; } Ad  nauseum.
  21. 21. Declarative vs. Reactive
  22. 22. .spinner { transition: opacity 1s; opacity: 1; } .loaded .spinner { opacity: 0; } Declara1ve  CSS…  
  23. 23. window.addEventListener("load", function load(event){ window.removeEventListener("load", load, false); body.classList.add("loaded"); },false); spinner.addEventListener("transitionend", removeSpinner, true); +  Reac1ve  JavaScript
  24. 24. Credit:  Square:  Madelin  Woods
  25. 25. Credit:  Square:  Madelin  Woods
  26. 26. I can’t make a physics engine with that. This totally works!
  27. 27. Anima/on  Library   Developers
  28. 28. greensock.com/gsap
  29. 29. VelocityJS.org
  30. 30. And then we can release it to the public? Sure, right after we catch up on client work!
  31. 31. Animation History The Fall of Flash
  32. 32. ?
  33. 33. THE WEB ANIMATION API the  Greatest  API  You’ve  Never  Heard  of an
  34. 34. Anima/on  Spec   Authors  &   Implementors
  35. 35. youtube.com/watch?v=9aKAQ3OTxUU
  36. 36. But does it have… • Performant  anima6ons   • Mo6on  Paths   • Callbacks   • Nes6ng  &  sequencing     • Pause,  play,  reverse,  seek
  37. 37. • Performant  anima6ons   • Mo6on  Paths   • Callbacks   • Nes6ng  &  sequencing     • Pause,  play,  reverse,  seek Well, actually, it does!
  38. 38. codepen.io/rachelnabors/pen/zxYexJ
  39. 39. 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.
  40. 40. Support
  41. 41. birtles.github.io/areweanimatedyet
  42. 42. It’s “under consideration.” …
  43. 43. Will no one think of the tablets?
  44. 44. github.com/web-­‐anima1ons
  45. 45. github.com/web-­‐anima1ons
  46. 46. Performance
  47. 47. engineering.flipboard.com/2015/02/mobile-­‐web
  48. 48. Frame rate is an accessibility issue. Think of the accessibility!
  49. 49. • Web  Anima6on  API  anima6ons  geEng  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)!
  50. 50. csstriggers.com
  51. 51. • Reflows  are  a  rendering  engine  problem. • opacity  &  transform  remain  safest  bet   • Browsers  keep  trying…   • See  also:  Google’s  Project  Ganesh  and  Mozilla’s   Servo Ge]ng  around  layout
  52. 52. • The  CSS  property  will-change  is  a  start   • Promotes  things  to  their  own  layer   • The  end  of  translateZ(0) Shortcut  through  the  GPU
  53. 53. FORWARD Pushing  the  web  (anima@ons)
  54. 54. 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!
  55. 55. What would you know about our problems? Why won’t you give us a chance?
  56. 56. Animation is coming, whether we’re ready or not.
  57. 57. Here’s the plan.
  58. 58. User  Interface   Designers • Don’t  be  afraid  of  JavaScript   • Take  6me  to  play  with  the   libraries
  59. 59. Interac/on   Developers • Check  out  the  polyfill’s  page   • Give  feedback
  60. 60. Anima/on  Library   Developers • Go  read  the  spec   • Give  feedback
  61. 61. Anima/on  Spec   Authors  &   Implementors • Find  be[er  ways  of  taking   feedback   • Meet  us  in  the  field
  62. 62. Everyone.
  63. 63. –John  Lasseter,  CCO  Pixar “The art challenges the technology, and the technology inspires the art.”
  64. 64. We are not our tools.
  65. 65. You  can  talk  to  me. Special Announcement
  66. 66. Ongoing  coverage  at  WebAnima6onWeekly.com @RachelNabors  |  RachelNabors.com rachelnabors.com/waapi #waapi

×