Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
with
@RachelNabors
& Alice
devtoolschallenger.com
lightningdesignsystem.com/design/motion
It’strue.rachelthegreat.com
rachelnabors.com/alice-in-
videoland/book
History
GOSSIP
OMG!!!1!
Birth of SMIL, 1999
SMIL
Birth of CSS Anima5ons and Transi5ons, 2009
CSS
Transi-ons
CSS
Anima-ons
CSS
Transi-ons
CSS
Anima-ons
SMIL
Seriously?
Internet Explorer’s Reac5on
One API to Rule Them All
CSS
Transi-ons
CSS
Anima-ons
SMIL
?
Some years later…
?
Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
SMIL
CSS
Transi-ons
CSS
Anima-ons
SMIL
?
Web
Anima-ons
API
la mort de SMIL, 2015
FirefoxDeveloperEdition
Core
Concepts
The Timing & Anima5on Models
The When The What
Timing
the Cheshire Cat’s 5meline
there
0 seconds
not all
there
8 seconds4 seconds2 61 3 5 7
“Time may be shi2ed backwards
and forwards, scaled, reversed,
paused, and repeated.”
–Web Animations API spec
Stateless Animation
Frame Rate Independent
Direc0on Agnos0c
Seek-able
In-synch no ma<er what
cdpn.io/MwYMJe
Animation
0 seconds 8 seconds4 seconds2 61 3 5 7
there not all
there
the Cheshire Cat’s 5meline
Keyframe Effect
Interac5on Development
Tradi5onal Anima5on
tweenskeyframe keyframe
key keyin-betweens
Do you evenremember me?
KeyframeEffect
Anima-on
Timing Anima-on
Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
SMIL
Web Anima5ons API underlies both
CSS Anima5ons and Transi5ons
CSS
Animations
& Transitions
WEB
ANIMATIONS API
I’ve a
CSS AnimaCons
& TransiCons course…
rachelnabors.com/
css-animaCons-course
20% off with
LETSANIMATE
KeyframeEffect
Anima-on
KeyframeEffect
Constructor
0% 8 seconds4 seconds2 61 3 5 7
there not all
there
Keyframe Effect
cdpn.io/adVpaX
#rabbit {
transition: transform 3s;
}
#rabbit.interacted {

transform: translateY(100%);

}
cdpn.io/eJyWzm
new KeyframeEffect(
);
whiteRabbit,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
],
{
duration: 30...
cdpn.io/eJyWzm
Familiar Keyframe timing options
duration = transition/animation-duration
delay = transition/animation-delay
fill = animat...
Shiny Keyframe timing options
endDelay Milliseconds to delay aDer the end of an
anima0on.
iterationStart When the itera0on...
Animation
Constructor
var rabbitDownKeyframes = 

new KeyframeEffect(
whiteRabbit,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(1...
KeyframeEffect
Anima-on
new Animation(rabbitDownKeyframes,
document.timeline);
var rabbitDownAnimation = 

new Animation(rabbitDownKeyframes,
docu...
Animation Methods
Animation.pause()
Animation.play()
Animation.reverse()
Animation.finish()
Animation.cancel()
whiteRabbit.removeEventListener(
"click", downHeGoes);
function downHeGoes() {
}
whiteRabbit.addEventListener("click",
dow...
cdpn.io/eJyWzm
Fortunately,
we have a shortcut.
animate( )
Method
#rabbit {
transition: transform 3s;
}
#rabbit.interacted {
transform: translateY(100%);
}
#rabbit.interacted {
animation: downHeGoes 3s forwards;
}
@keyframes downHeGoes {
0% {
transform: translateY(0%);
}
100% {...
cdpn.io/QyOqqW
#alice {
animation: aliceTumbling infinite 3s linear;
}
@keyframes aliceTumbling {
0% {
color: #000;
transform: rotate(0) ...
element.animate(
keyframes,
timingOptions
);
var aliceKeyframes = [
{
transform: 'rotate(0) …',
color: '#000'
},
{
color: '#431236',
},
{
transform: 'rotate(360deg) …'...
var aliceTiming = {
duration: 3000,
iterations: Infinity
}
Let’s put these together!
element.animate(
keyframes,
timingOptions
);
document.getElementById("alice").animate(
aliceTumbling,
aliceTiming
);
cdpn.io/rxpmJL
Playback
& Callbacks
Anima-on
Animation Attributes
onfinish promise
oncancel promise
ready promise
playState read-only, use methods
playbackRate more on...
KeyframeEffect
Anima-on
Animation Attributes
currentTime loca0on on 0meline
finished callback
goo.gl/Ek7T5h
var aliceChange =
document.getElementById('alice')

.animate(
[
{ transform: 'scale(.5) …' },
{ transform: 'scale(2) …' }
...
goo.gl/Ek7T5h
var aliceChange =
document.getElementById('alice')

.animate(
[
{ transform: 'scale(.5) …' },
{ transform: 'scale(2) …' }
...
Setting the
Controls
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}...
goo.gl/Ek7T5h
var growAlice = function() {
aliceChange.playbackRate = 1;
aliceChange.play();
// play cake’s animation
nommingCake.play()...
var stopPlayingAlice = function() {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
bottle.addEventListener...
Game Over:
Two Endings
cdpn.io/bEPdQr
cdpn.io/EPJdJx
cdpn.io/PNYGZQ
// When the cake or runs out...
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;
// ...or Alice reaches the en...
var endGame = function() {
var alicePlayhead =
aliceChange.currentTime;
var aliceTimeline =
aliceChange.effect.activeDurat...
var aliceHeight =
alicePlayhead/aliceTimeline;
if (aliceHeight <= .333){
// Alice got smaller!
…
} else if (aliceHeight >=...
var endGame = function() {
stopPlayingAlice();
var alicePlayhead = aliceChange.currentTime;
var aliceTimeline = aliceChang...
Bonus:
Randomizing
Animation
cdpn.io/EPJdJx
var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tea...
Playback
Rate
The Red Queen’s Race
cdpn.io/GZpREz
var redQueen_alice =
redQueen_alice_sprite.animate(
spriteFrames,
{
easing: 'steps(6, end)',
direction: "reverse",
duratio...
setInterval( function() {
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);
setInterv...
var goFaster = function() {
redQueen_alice.playbackRate *= 1.1;
}
document.addEventListener("click", goFaster);
document.a...
Running to
Stay in Place
cdpn.io/PNGGaV
What’s
Next
github.com/web-animations/web-
animations-js
Support for the Web Anima5ons API
Let’s do this.
Totes.
status.microsoftedge.com
uservoice.microso2edge.com
Spirit.js
ChromeCanary
GroupingandSequencing

goo.gl/1zH64t
Timing Anima-on
Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
Web Anima5ons API
opens the door to future anima5on specs
?
Ace Folks
Alex Miller
Opal Essence
Chris Mills
Brian Birtles
@RachNabo
RachelNabors.com/waapi
WebAnimaConWeekly.com
slack.AnimaConAtWork.com
Here for all your animaCon needs.
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Alice in Web Animations API Land
Upcoming SlideShare
Loading in …5
×

Alice in Web Animations API Land

3,271 views

Published on

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.

Published in: Design

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.

×