Successfully reported this slideshow.
Your SlideShare is downloading. ×

Alice in Web Animations API Land

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 120 Ad

Alice in Web Animations API Land

Download to read offline

Animation is back in the web development tool chest! We know of declarative CSS Animations and Transitions and fully featured JavaScript animation libraries like GreenSock, but there's a third, dynamic option: the Web Animation API! In this talk Rachel Nabors will take you on a magical journey with Alice from Wonderland to show you how this new API is used to run the CSS Animations in your browser and how you can use it to generate and manipulate animations in your project. Colorful, interactive, useful fun for all disciplines.

Animation is back in the web development tool chest! We know of declarative CSS Animations and Transitions and fully featured JavaScript animation libraries like GreenSock, but there's a third, dynamic option: the Web Animation API! In this talk Rachel Nabors will take you on a magical journey with Alice from Wonderland to show you how this new API is used to run the CSS Animations in your browser and how you can use it to generate and manipulate animations in your project. Colorful, interactive, useful fun for all disciplines.

Advertisement
Advertisement

More Related Content

Similar to Alice in Web Animations API Land (20)

Advertisement

Alice in Web Animations API Land

  1. 1. with @RachelNabors & Alice
  2. 2. devtoolschallenger.com
  3. 3. lightningdesignsystem.com/design/motion
  4. 4. It’strue.rachelthegreat.com
  5. 5. rachelnabors.com/alice-in- videoland/book
  6. 6. History GOSSIP OMG!!!1!
  7. 7. Birth of SMIL, 1999 SMIL
  8. 8. Birth of CSS Anima5ons and Transi5ons, 2009 CSS Transi-ons CSS Anima-ons
  9. 9. CSS Transi-ons CSS Anima-ons SMIL Seriously? Internet Explorer’s Reac5on
  10. 10. One API to Rule Them All CSS Transi-ons CSS Anima-ons SMIL ?
  11. 11. Some years later…
  12. 12. ? Web Anima-ons API CSS Transi-ons CSS Anima-ons SMIL
  13. 13. CSS Transi-ons CSS Anima-ons SMIL ? Web Anima-ons API la mort de SMIL, 2015
  14. 14. FirefoxDeveloperEdition
  15. 15. Core Concepts
  16. 16. The Timing & Anima5on Models The When The What
  17. 17. Timing
  18. 18. the Cheshire Cat’s 5meline there 0 seconds not all there 8 seconds4 seconds2 61 3 5 7
  19. 19. “Time may be shi2ed backwards and forwards, scaled, reversed, paused, and repeated.” –Web Animations API spec
  20. 20. Stateless Animation Frame Rate Independent Direc0on Agnos0c Seek-able In-synch no ma<er what
  21. 21. cdpn.io/MwYMJe
  22. 22. Animation
  23. 23. 0 seconds 8 seconds4 seconds2 61 3 5 7 there not all there the Cheshire Cat’s 5meline Keyframe Effect
  24. 24. Interac5on Development Tradi5onal Anima5on tweenskeyframe keyframe key keyin-betweens
  25. 25. Do you evenremember me? KeyframeEffect Anima-on
  26. 26. Timing Anima-on
  27. 27. Web Anima-ons API CSS Transi-ons CSS Anima-ons SMIL Web Anima5ons API underlies both CSS Anima5ons and Transi5ons
  28. 28. CSS Animations & Transitions WEB ANIMATIONS API
  29. 29. I’ve a CSS AnimaCons & TransiCons course… rachelnabors.com/ css-animaCons-course 20% off with LETSANIMATE
  30. 30. KeyframeEffect Anima-on
  31. 31. KeyframeEffect Constructor
  32. 32. 0% 8 seconds4 seconds2 61 3 5 7 there not all there Keyframe Effect
  33. 33. cdpn.io/adVpaX
  34. 34. #rabbit { transition: transform 3s; } #rabbit.interacted {
 transform: translateY(100%);
 }
  35. 35. cdpn.io/eJyWzm
  36. 36. new KeyframeEffect( ); whiteRabbit, [ { transform: 'translateY(0%)' }, { transform: 'translateY(100%)' } ], { duration: 3000, fill: 'forwards' } var rabbitDownKeyframes = 

  37. 37. cdpn.io/eJyWzm
  38. 38. Familiar Keyframe timing options duration = transition/animation-duration delay = transition/animation-delay fill = animation-fill-mode iterations = animation-iteration-count direction = animation-direction easing = transition/animation-timing-function; Defaults to linear.
  39. 39. Shiny Keyframe timing options endDelay Milliseconds to delay aDer the end of an anima0on. iterationStart When the itera0on the anima0on should start. composite, iteration-composite
  40. 40. Animation Constructor
  41. 41. var rabbitDownKeyframes = 
 new KeyframeEffect( whiteRabbit, [ { transform: 'translateY(0%)' }, { transform: 'translateY(100%)' } ], { duration: 3000, fill: 'forwards' } );
  42. 42. KeyframeEffect Anima-on
  43. 43. new Animation(rabbitDownKeyframes, document.timeline); var rabbitDownAnimation = 
 new Animation(rabbitDownKeyframes, document.timeline); new Animation(rabbitDownKeyframes, document.timeline);
  44. 44. Animation Methods Animation.pause() Animation.play() Animation.reverse() Animation.finish() Animation.cancel()
  45. 45. whiteRabbit.removeEventListener( "click", downHeGoes); function downHeGoes() { } whiteRabbit.addEventListener("click", downHeGoes); rabbitDownAnimation.play();
  46. 46. cdpn.io/eJyWzm
  47. 47. Fortunately, we have a shortcut.
  48. 48. animate( ) Method
  49. 49. #rabbit { transition: transform 3s; } #rabbit.interacted { transform: translateY(100%); }
  50. 50. #rabbit.interacted { animation: downHeGoes 3s forwards; } @keyframes downHeGoes { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } }
  51. 51. cdpn.io/QyOqqW
  52. 52. #alice { animation: aliceTumbling infinite 3s linear; } @keyframes aliceTumbling { 0% { color: #000; transform: rotate(0) …; } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) …; } }
  53. 53. element.animate( keyframes, timingOptions );
  54. 54. var aliceKeyframes = [ { transform: 'rotate(0) …', color: '#000' }, { color: '#431236', }, { transform: 'rotate(360deg) …', color: '#000' } ]; offset: 0.3
  55. 55. var aliceTiming = { duration: 3000, iterations: Infinity }
  56. 56. Let’s put these together!
  57. 57. element.animate( keyframes, timingOptions );
  58. 58. document.getElementById("alice").animate( aliceTumbling, aliceTiming );
  59. 59. cdpn.io/rxpmJL
  60. 60. Playback & Callbacks
  61. 61. Anima-on
  62. 62. Animation Attributes onfinish promise oncancel promise ready promise playState read-only, use methods playbackRate more on you later… effect points to…
  63. 63. KeyframeEffect Anima-on
  64. 64. Animation Attributes currentTime loca0on on 0meline finished callback
  65. 65. goo.gl/Ek7T5h
  66. 66. var aliceChange = document.getElementById('alice')
 .animate( [ { transform: 'scale(.5) …' }, { transform: 'scale(2) …' } ], aliceTimingOptions); aliceChange.pause();
  67. 67. goo.gl/Ek7T5h
  68. 68. var aliceChange = document.getElementById('alice')
 .animate( [ { transform: 'scale(.5) …' }, { transform: 'scale(2) …' } ], aliceTimingOptions); aliceChange.pause(); aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
  69. 69. Setting the Controls
  70. 70. var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice); var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice); var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice); var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice); var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice); var shrinkAlice = function() { aliceChange.reverse(); // bottle’s animation drinking.play(); } drinking.addEventListener("mousedown", shrinkAlice);
  71. 71. goo.gl/Ek7T5h
  72. 72. var growAlice = function() { aliceChange.playbackRate = 1; aliceChange.play(); // play cake’s animation nommingCake.play(); } cake.addEventListener("mousedown", growAlice);
  73. 73. var stopPlayingAlice = function() { aliceChange.pause(); nommingCake.pause(); drinking.pause(); }; bottle.addEventListener("mouseup", stopPlayingAlice); cake.addEventListener("mouseup", stopPlayingAlice); var stopPlayingAlice = function() { aliceChange.pause(); nommingCake.pause(); drinking.pause(); }; bottle.addEventListener("mouseup", stopPlayingAlice); cake.addEventListener("mouseup", stopPlayingAlice); var stopPlayingAlice = function() { aliceChange.pause(); nommingCake.pause(); drinking.pause(); }; bottle.addEventListener("mouseup", stopPlayingAlice); cake.addEventListener("mouseup", stopPlayingAlice);
  74. 74. Game Over: Two Endings
  75. 75. cdpn.io/bEPdQr
  76. 76. cdpn.io/EPJdJx
  77. 77. cdpn.io/PNYGZQ
  78. 78. // When the cake or runs out... nommingCake.onfinish = endGame; drinking.onfinish = endGame; // ...or Alice reaches the end of her animation aliceChange.onfinish = endGame; // When the cake or runs out... animation.onfinish = endGame; drinking.onfinish = endGame; // ...or Alice reaches the end of her animation aliceChange.onfinish = endGame; // When the cake or runs out... nommingCake.onfinish = endGame; drinking.onfinish = endGame; // ...or Alice reaches the end of her animation aliceChange.onfinish = endGame;
  79. 79. var endGame = function() { var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; } var endGame = function() { var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; } var endGame = function() { var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; } var endGame = function() { var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; }
  80. 80. var aliceHeight = alicePlayhead/aliceTimeline; if (aliceHeight <= .333){ // Alice got smaller! … } else if (aliceHeight >= .666) { // Alice got bigger! … } else { // Alice didn't change significantly … } var aliceHeight = alicePlayhead/aliceTimeline; if (aliceHeight <= .333){ // Alice got smaller! … } else if (aliceHeight >= .666) { // Alice got bigger! … } else { // Alice didn't change significantly … }
  81. 81. var endGame = function() { stopPlayingAlice(); var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; if (aliceHeight <= .333){ // Alice got smaller! … } else if (aliceHeight >= .666) { // Alice got bigger! … } else { // Alice didn't change significantly … } } var endGame = function() { stopPlayingAlice(); var alicePlayhead = aliceChange.currentTime; var aliceTimeline = aliceChange.effect.activeDuration; var aliceHeight = alicePlayhead/aliceTimeline; if (aliceHeight <= .333){ // Alice got smaller! … } else if (aliceHeight >= .666) { // Alice got bigger! … } else { // Alice didn't change significantly … } }
  82. 82. Bonus: Randomizing Animation
  83. 83. cdpn.io/EPJdJx
  84. 84. var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; } tears.forEach(function(tear) { tear.animate( tearsFalling, { delay: getRandomMsRange(-1000, 1000), duration: getRandomMsRange(2000, 6000), iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; } tears.forEach(function(tear) { tear.animate( tearsFalling, { delay: getRandomMsRange(-1000, 1000), duration: getRandomMsRange(2000, 6000), iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; } tears.forEach(function(tear) { tear.animate( tearsFalling, { delay: getRandomMsRange(-1000, 1000), duration: getRandomMsRange(2000, 6000), iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; } tears.forEach(function(tear) { tear.animate( tearsFalling, { delay: getRandomMsRange(-1000, 1000), duration: getRandomMsRange(2000, 6000), iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; } tears.forEach(function(tear) { tear.animate( tearsFalling, { delay: getRandomMsRange(-1000, 1000), duration: getRandomMsRange(2000, 6000), iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); });
  85. 85. Playback Rate
  86. 86. The Red Queen’s Race
  87. 87. cdpn.io/GZpREz
  88. 88. var redQueen_alice = redQueen_alice_sprite.animate( spriteFrames, { easing: 'steps(6, end)', direction: "reverse", duration: 600, iterations: Infinity, playbackRate: 1 }); var redQueen_alice = redQueen_alice_sprite.animate( spriteFrames, { easing: 'steps(6, end)', direction: "reverse", duration: 600, iterations: Infinity, playbackRate: 1 });
  89. 89. setInterval( function() { if (redQueen_alice.playbackRate > .4) { redQueen_alice.playbackRate *= .9; } }, 3000); setInterval( function() { if (redQueen_alice.playbackRate > .4) { redQueen_alice.playbackRate *= .9; } }, 3000); setInterval( function() { if (redQueen_alice.playbackRate > .4) { redQueen_alice.playbackRate *= .9; } }, 3000);
  90. 90. var goFaster = function() { redQueen_alice.playbackRate *= 1.1; } document.addEventListener("click", goFaster); document.addEventListener("touchstart", goFaster);
  91. 91. Running to Stay in Place
  92. 92. cdpn.io/PNGGaV
  93. 93. What’s Next
  94. 94. github.com/web-animations/web- animations-js
  95. 95. Support for the Web Anima5ons API Let’s do this. Totes.
  96. 96. status.microsoftedge.com
  97. 97. uservoice.microso2edge.com
  98. 98. Spirit.js
  99. 99. ChromeCanary
  100. 100. GroupingandSequencing
 goo.gl/1zH64t
  101. 101. Timing Anima-on
  102. 102. Web Anima-ons API CSS Transi-ons CSS Anima-ons Web Anima5ons API opens the door to future anima5on specs ?
  103. 103. Ace Folks Alex Miller Opal Essence Chris Mills Brian Birtles
  104. 104. @RachNabo RachelNabors.com/waapi WebAnimaConWeekly.com slack.AnimaConAtWork.com Here for all your animaCon needs.

×