Tweet
Tweet

Slide 1

Slide 1 text

ANIMA TIONS SWEET WEB API

Slide 2

Slide 2 text

HI, I’M @r_mdias

Slide 3

Slide 3 text

HI, I’M @r_mdias

Slide 4

Slide 4 text

HI, I’M Rodolfo Dias Front End Engineer at @r_mdias

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

PLA TFORM IMPROVEMENTS

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

vs

Slide 11

Slide 11 text

vs

Slide 12

Slide 12 text

vs document.querySelector(); document.querySelectorAll();

Slide 13

Slide 13 text

vs document.querySelector(); document.querySelectorAll();

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

vs ...

Slide 17

Slide 17 text

vs ...

Slide 18

Slide 18 text

WHA T IS AN ANIMA TION?

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

}

Slide 24

Slide 24 text

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?

Slide 25

Slide 25 text

HOW HAVE WE BEEN CREA TING ANIMA TIONS?

Slide 26

Slide 26 text

HOVER INTERACTIONS

Slide 27

Slide 27 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 28

Slide 28 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 29

Slide 29 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 30

Slide 30 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 31

Slide 31 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 32

Slide 32 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 33

Slide 33 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 34

Slide 34 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 35

Slide 35 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 36

Slide 36 text

.my-sweet { transition: transform .25s ease; } .my-sweet:hover { transform: scale(.3); }

Slide 37

Slide 37 text

CSS ANIMA TIONS +KEYFRAMES

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

WHA T ARE THE PROBLEMS HERE?

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

WHA T ARE THE PROBLEMS HERE?

Slide 50

Slide 50 text

HOW CAN WE IMPROVE IT?

Slide 51

Slide 51 text

PERFORMANCE DEVELOPER EXPERIENCE BEHAVIOUR MANIPULA TION

Slide 52

Slide 52 text

HOW CAN WE ANIMA TE NOWADAYS?

Slide 53

Slide 53 text

ANIMA TIONS SWEET WEB API

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

# 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%)'} ];

Slide 68

Slide 68 text

# 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%)'} ];

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

SO... WHERE IS THE WAAPI POWER?

Slide 72

Slide 72 text

# ANIMA TION PROPERTIES # Properties Animation.currentTime: number Animation.playState: string 'idle'|'running'|'paused'|'finished'; Animation.startTime: number Animation.timeline: string More...

Slide 73

Slide 73 text

# EVENT HANDLERS & METHODS # Event handlers Animation.oncancel: Promise Animation.onfinish: Promise # Methods Animation.cancel(); Animation.finish(); Animation.pause(); Animation.play(); Animation.reverse();

Slide 74

Slide 74 text

# ANIMA TION PROPERTIES const myAnimationOptions = { id: 'sweetAnimation', delay: 500, duration: 2000, iterations: 3, direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' } More ...

Slide 75

Slide 75 text

# SNOOP SLEEPING

Slide 76

Slide 76 text

# SNOOP SLEEPING

Slide 77

Slide 77 text

# 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'; }

Slide 78

Slide 78 text

# 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'; }

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

github.com/rmdias/webanimations-playground

Slide 88

Slide 88 text

rmdias.github.io/webanimations-playground

Slide 89

Slide 89 text

speakerdeck.com/rmdias

Slide 90

Slide 90 text

DZIĘKUJĘ! @r_mdias