Sweet Web Animations API

Snoop animation → https://codepen.io/rmdias/pen/rpNpwB

We'll figure out how awesome is the web platform and how fast it's evolving. Back in the days, we used flash to make powerful animations, then the platform evolved and we had the power on the hands to make animations using JS libraries to make it a bit easier. Now you can simply do it using this sweet dream called Web animations API, it'll provide you a bunch of interfaces and power to create lovely animations in applications. Well try it and feel the sweet taste ;)

Transcript

1. ANIMA TIONS SWEET WEB API
2. HI, I’M @r_mdias
3. HI, I’M @r_mdias
4. HI, I’M Rodolfo Dias Front End Engineer at @r_mdias
7. PLA TFORM IMPROVEMENTS
10. vs <canvas></canvas>
11. vs <canvas></canvas>
12. vs document.querySelector(); document.querySelectorAll();
13. vs document.querySelector(); document.querySelectorAll();
16. vs ...
17. vs ...
18. WHA T IS AN ANIMA TION?
23. }
24. Animation is the process of making the illusion of motion and the illusion of change by means of the rapid succession of sequential images that minimally differ from each other. WHA T IS AN ANIMA TION?
25. HOW HAVE WE BEEN CREA TING ANIMA TIONS?
26. HOVER INTERACTIONS
27. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
28. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
29. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
30. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
31. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
32. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
33. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
34. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
35. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
36. .my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }
37. CSS ANIMA TIONS +KEYFRAMES
39. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
40. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
41. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
42. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
43. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
44. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
45. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 { animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
46. WHA T ARE THE PROBLEMS HERE?
49. WHA T ARE THE PROBLEMS HERE?
50. HOW CAN WE IMPROVE IT?
51. PERFORMANCE DEVELOPER EXPERIENCE BEHAVIOUR MANIPULA TION
52. HOW CAN WE ANIMA TE NOWADAYS?
53. ANIMA TIONS SWEET WEB API
54. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
55. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
56. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
57. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
58. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
59. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
60. let snoopTail = document.querySelector('#tail'); let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimationKeyFrames = new KeyframeEffect( snoopTail, [{transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'}], tailShakeOptions ); let snoopTailAnimation = new Animation( snoopTailAnimationKeyFrames, document.timeline ); snoopTailAnimation.play() # TAIL ANIMA TION
61. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
62. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
63. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
64. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
65. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
66. let snoopTail = document.querySelector('#tail'); let tailShakeKeyframes = [ {transform: 'rotate(0deg)'}, {transform: 'rotate(20deg)'}, {transform: 'rotate(0deg)'} ]; let tailShakeOptions = { duration: 500, iterations: Infinity }; let snoopTailAnimation = snoopTail.animate( tailShakeKeyframes, tailShakeOptions ); # TAIL ANIMA TION - SHORT VERSION
67. # CLOUD ANIMA TION let cloud1 = document.querySelector('#dog-cloud1'); let cloud2 = document.querySelector('#dog-cloud2'); let cloudXKeyframes = [ {transform: 'translateX(0)'}, {transform: 'translateX(95%)'}, {transform: 'translateX(0)'} ]; let cloudYKeyframes = [ {marginTop: 0}, {marginTop: '2px'}, {marginTop: 0} ]; let cloud2XKeyframes = [ {transform: 'translateX(95%)'}, {transform: 'translateX(0)'}, {transform: 'translateX(95%)'} ];
68. # CLOUD ANIMA TION let cloud1 = document.querySelector('#dog-cloud1'); let cloud2 = document.querySelector('#dog-cloud2'); let cloudXKeyframes = [ {transform: 'translateX(0)'}, {transform: 'translateX(95%)'}, {transform: 'translateX(0)'} ]; let cloudYKeyframes = [ {marginTop: 0}, {marginTop: '2px'}, {marginTop: 0} ]; let cloud2XKeyframes = [ {transform: 'translateX(95%)'}, {transform: 'translateX(0)'}, {transform: 'translateX(95%)'} ];
69. # CLOUD ANIMA TION let cloudAnimationX = cloud1.animate(cloudXKeyframes,{ duration: 20000, iterations: Infinity }); let cloudAnimationY = cloud1.animate(cloudYKeyframes, { duration: 2000, iterations: Infinity }); let cloud2AnimationX = cloud2.animate(cloud2XKeyframes,{ duration: 20000, iterations: Infinity });
70. # CLOUD ANIMA TION let cloudAnimationX = cloud1.animate(cloudXKeyframes,{ duration: 20000, iterations: Infinity }); let cloudAnimationY = cloud1.animate(cloudYKeyframes, { duration: 2000, iterations: Infinity }); let cloud2AnimationX = cloud2.animate(cloud2XKeyframes,{ duration: 20000, iterations: Infinity });
71. SO... WHERE IS THE WAAPI POWER?
72. # ANIMA TION PROPERTIES # Properties Animation.currentTime: number Animation.playState: string 'idle'|'running'|'paused'|'finished'; Animation.startTime: number Animation.timeline: string More...
73. # EVENT HANDLERS & METHODS # Event handlers Animation.oncancel: Promise Animation.onfinish: Promise # Methods Animation.cancel(); Animation.finish(); Animation.pause(); Animation.play(); Animation.reverse();
74. # ANIMA TION PROPERTIES const myAnimationOptions = { id: 'sweetAnimation', delay: 500, duration: 2000, iterations: 3, direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' } More ...
75. # SNOOP SLEEPING
76. # SNOOP SLEEPING
77. # SNOOP SLEEPING let sleepyEyes = document.querySelector('#sleepy-eyes'); let awakeEyes = document.querySelector('#awake-eyes'); let snoopHead = document.querySelector('#head'); snoopHead.addEventListener('click', handleSnoopRest); function handleSnoopRest() { if (isSnoopAwake()) { snoopSleepingAnimation(); } else { snoopWakeupAnimation(); } } function isSnoopAwake() { return snoopTailAnimation.playState !== 'paused'; }
78. # SNOOP SLEEPING let sleepyEyes = document.querySelector('#sleepy-eyes'); let awakeEyes = document.querySelector('#awake-eyes'); let snoopHead = document.querySelector('#head'); snoopHead.addEventListener('click', handleSnoopRest); function handleSnoopRest() { if (isSnoopAwake()) { snoopSleepingAnimation(); } else { snoopWakeupAnimation(); } } function isSnoopAwake() { return snoopTailAnimation.playState !== 'paused'; }
79. # SNOOP SLEEPING let hideEyesKeyframes = [ { opacity: '1' }, { opacity: '0' } ]; let showEyesKeyframes = [ { opacity: '0' }, { opacity: '1' } ]; let eyesAnimationOptions = { duration: 500, fill: 'forwards' };
80. # SNOOP SLEEPING let hideEyesKeyframes = [ { opacity: '1' }, { opacity: '0' } ]; let showEyesKeyframes = [ { opacity: '0' }, { opacity: '1' } ]; let eyesAnimationOptions = { duration: 500, fill: 'forwards' };
81. # SNOOP SLEEPING function snoopSleepingAnimation() { awakeEyes.animate( hideEyesKeyframes, eyesAnimationOptions ); sleepyEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.pause(); }
82. # SNOOP SLEEPING function snoopSleepingAnimation() { awakeEyes.animate( hideEyesKeyframes, eyesAnimationOptions ); sleepyEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.pause(); }
83. # SNOOP SLEEPING function snoopWakeupAnimation() { sleepyEyes.animate( hideEyesKeyframes, eyesAnimationOptions ); awakeEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.play(); }
84. # SNOOP SLEEPING function snoopWakeupAnimation() { sleepyEyes.animate( hideEyesKeyframes, eyesAnimationOptions ); awakeEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.play(); }
87. github.com/rmdias/webanimations-playground
88. rmdias.github.io/webanimations-playground
89. speakerdeck.com/rmdias
90. DZIĘKUJĘ! @r_mdias