Successfully reported this slideshow.

State of the Animation

14

Share

Loading in …3
×
1 of 82
1 of 82

State of the Animation

14

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×