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
×

of

Alice in Web Animations API Land Slide 1 Alice in Web Animations API Land Slide 2 Alice in Web Animations API Land Slide 3 Alice in Web Animations API Land Slide 4 Alice in Web Animations API Land Slide 5 Alice in Web Animations API Land Slide 6 Alice in Web Animations API Land Slide 7 Alice in Web Animations API Land Slide 8 Alice in Web Animations API Land Slide 9 Alice in Web Animations API Land Slide 10 Alice in Web Animations API Land Slide 11 Alice in Web Animations API Land Slide 12 Alice in Web Animations API Land Slide 13 Alice in Web Animations API Land Slide 14 Alice in Web Animations API Land Slide 15 Alice in Web Animations API Land Slide 16 Alice in Web Animations API Land Slide 17 Alice in Web Animations API Land Slide 18 Alice in Web Animations API Land Slide 19 Alice in Web Animations API Land Slide 20 Alice in Web Animations API Land Slide 21 Alice in Web Animations API Land Slide 22 Alice in Web Animations API Land Slide 23 Alice in Web Animations API Land Slide 24 Alice in Web Animations API Land Slide 25 Alice in Web Animations API Land Slide 26 Alice in Web Animations API Land Slide 27 Alice in Web Animations API Land Slide 28 Alice in Web Animations API Land Slide 29 Alice in Web Animations API Land Slide 30 Alice in Web Animations API Land Slide 31 Alice in Web Animations API Land Slide 32 Alice in Web Animations API Land Slide 33 Alice in Web Animations API Land Slide 34 Alice in Web Animations API Land Slide 35 Alice in Web Animations API Land Slide 36 Alice in Web Animations API Land Slide 37 Alice in Web Animations API Land Slide 38 Alice in Web Animations API Land Slide 39 Alice in Web Animations API Land Slide 40 Alice in Web Animations API Land Slide 41 Alice in Web Animations API Land Slide 42 Alice in Web Animations API Land Slide 43 Alice in Web Animations API Land Slide 44 Alice in Web Animations API Land Slide 45 Alice in Web Animations API Land Slide 46 Alice in Web Animations API Land Slide 47 Alice in Web Animations API Land Slide 48 Alice in Web Animations API Land Slide 49 Alice in Web Animations API Land Slide 50 Alice in Web Animations API Land Slide 51 Alice in Web Animations API Land Slide 52 Alice in Web Animations API Land Slide 53 Alice in Web Animations API Land Slide 54 Alice in Web Animations API Land Slide 55 Alice in Web Animations API Land Slide 56 Alice in Web Animations API Land Slide 57 Alice in Web Animations API Land Slide 58 Alice in Web Animations API Land Slide 59 Alice in Web Animations API Land Slide 60 Alice in Web Animations API Land Slide 61 Alice in Web Animations API Land Slide 62 Alice in Web Animations API Land Slide 63 Alice in Web Animations API Land Slide 64 Alice in Web Animations API Land Slide 65 Alice in Web Animations API Land Slide 66 Alice in Web Animations API Land Slide 67 Alice in Web Animations API Land Slide 68 Alice in Web Animations API Land Slide 69 Alice in Web Animations API Land Slide 70 Alice in Web Animations API Land Slide 71 Alice in Web Animations API Land Slide 72 Alice in Web Animations API Land Slide 73 Alice in Web Animations API Land Slide 74 Alice in Web Animations API Land Slide 75 Alice in Web Animations API Land Slide 76 Alice in Web Animations API Land Slide 77 Alice in Web Animations API Land Slide 78 Alice in Web Animations API Land Slide 79 Alice in Web Animations API Land Slide 80 Alice in Web Animations API Land Slide 81 Alice in Web Animations API Land Slide 82 Alice in Web Animations API Land Slide 83 Alice in Web Animations API Land Slide 84 Alice in Web Animations API Land Slide 85 Alice in Web Animations API Land Slide 86 Alice in Web Animations API Land Slide 87 Alice in Web Animations API Land Slide 88 Alice in Web Animations API Land Slide 89 Alice in Web Animations API Land Slide 90 Alice in Web Animations API Land Slide 91 Alice in Web Animations API Land Slide 92 Alice in Web Animations API Land Slide 93 Alice in Web Animations API Land Slide 94 Alice in Web Animations API Land Slide 95 Alice in Web Animations API Land Slide 96 Alice in Web Animations API Land Slide 97 Alice in Web Animations API Land Slide 98 Alice in Web Animations API Land Slide 99 Alice in Web Animations API Land Slide 100 Alice in Web Animations API Land Slide 101 Alice in Web Animations API Land Slide 102 Alice in Web Animations API Land Slide 103 Alice in Web Animations API Land Slide 104 Alice in Web Animations API Land Slide 105 Alice in Web Animations API Land Slide 106 Alice in Web Animations API Land Slide 107 Alice in Web Animations API Land Slide 108 Alice in Web Animations API Land Slide 109 Alice in Web Animations API Land Slide 110 Alice in Web Animations API Land Slide 111 Alice in Web Animations API Land Slide 112 Alice in Web Animations API Land Slide 113 Alice in Web Animations API Land Slide 114 Alice in Web Animations API Land Slide 115 Alice in Web Animations API Land Slide 116 Alice in Web Animations API Land Slide 117 Alice in Web Animations API Land Slide 118 Alice in Web Animations API Land Slide 119 Alice in Web Animations API Land Slide 120
Upcoming SlideShare
Edward segel interactive_storytelling
Next
Download to read offline and view in fullscreen.

9 Likes

Share

Download to read offline

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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.
  • folktrash

    Oct. 31, 2017
  • erickleos

    Jul. 27, 2017
  • mauricio-angulo

    Jul. 26, 2017
  • logicaroma

    Jul. 26, 2017
  • BriSuffety

    Sep. 9, 2016
  • jbagnato

    Aug. 10, 2016
  • macmengerink

    May. 16, 2016
  • electronspin

    Apr. 21, 2016
  • FoxPeterson

    Apr. 11, 2016

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.

Views

Total views

4,529

On Slideshare

0

From embeds

0

Number of embeds

807

Actions

Downloads

62

Shares

0

Comments

0

Likes

9

×