Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sweet Web Animations API

Rodolfo Dias
February 22, 2018

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 ;)

Rodolfo Dias

February 22, 2018
Tweet

More Decks by Rodolfo Dias

Other Decks in Programming

Transcript

  1. }

  2. 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?
  3. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  4. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  5. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  6. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  7. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  8. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  9. .clouds { animation: clouds 10s ease-in infinite; } #cloud2 {

    animation-delay: 2s; } #tail { animation: tail 5s linear infinite; } @keyframes clouds { ... } @keyframes tail { ... }
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. # 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%)'} ];
  24. # 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%)'} ];
  25. # 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 });
  26. # 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 });
  27. # ANIMA TION PROPERTIES # Properties Animation.currentTime: number Animation.playState: string

    'idle'|'running'|'paused'|'finished'; Animation.startTime: number Animation.timeline: string More...
  28. # EVENT HANDLERS & METHODS # Event handlers Animation.oncancel: Promise

    Animation.onfinish: Promise # Methods Animation.cancel(); Animation.finish(); Animation.pause(); Animation.play(); Animation.reverse();
  29. # ANIMA TION PROPERTIES const myAnimationOptions = { id: 'sweetAnimation',

    delay: 500, duration: 2000, iterations: 3, direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' } More ...
  30. # 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'; }
  31. # 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'; }
  32. # SNOOP SLEEPING let hideEyesKeyframes = [ { opacity: '1'

    }, { opacity: '0' } ]; let showEyesKeyframes = [ { opacity: '0' }, { opacity: '1' } ]; let eyesAnimationOptions = { duration: 500, fill: 'forwards' };
  33. # SNOOP SLEEPING let hideEyesKeyframes = [ { opacity: '1'

    }, { opacity: '0' } ]; let showEyesKeyframes = [ { opacity: '0' }, { opacity: '1' } ]; let eyesAnimationOptions = { duration: 500, fill: 'forwards' };
  34. # SNOOP SLEEPING function snoopSleepingAnimation() { awakeEyes.animate( hideEyesKeyframes, eyesAnimationOptions );

    sleepyEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.pause(); }
  35. # SNOOP SLEEPING function snoopSleepingAnimation() { awakeEyes.animate( hideEyesKeyframes, eyesAnimationOptions );

    sleepyEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.pause(); }
  36. # SNOOP SLEEPING function snoopWakeupAnimation() { sleepyEyes.animate( hideEyesKeyframes, eyesAnimationOptions );

    awakeEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.play(); }
  37. # SNOOP SLEEPING function snoopWakeupAnimation() { sleepyEyes.animate( hideEyesKeyframes, eyesAnimationOptions );

    awakeEyes.animate( showEyesKeyframes, eyesAnimationOptions ); snoopTailAnimation.play(); }