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.
Choose
Your
Animation
Adventure
Val Head • #fronteers
You have encountered an interface that requires animation.
What would you like to use?
(1) CSS?
(2) JavaScript?
(3) SVG?
(...
CSS
Key
Frames
Transitions
What CSS is great at:
• Well-defined state transitions
• Loading animations, looping animations
• Animations on :hover, :fo...
Pros:
• No external library needed
• Great potential for performance without much effort
• Keyframes are reusable
• Can ad...
Cons:
• Access to limited events
• Defined entirely ahead of time
• Can’t separate transform properties*
CSS
CSS + JS = 🙌
CSSIn Summary
Where it shines:
• Animated interactions with defined states
• Simple interactive animations
Biggest Pro:
• N...
CSS is pretty great, but it might be 

time to move to JavaScript if:
• You’ll be chaining more than 3 animations in a seq...
VanillaCanvas Web GL
react
Libs
Web Animation
API
JS
What javascript is great at:
JS • Complex animated interactions
• Narrative or immersive animation
• Dynamic state transit...
requestAnimationFrame
Vanilla JS - requestAnimationFrame
JS function moveCat() {
. . .
currentValue = changeInValue * progress;
cat.style.transf...
Vanilla JS - requestAnimationFrame
JS function moveCat() {
. . .
currentValue = changeInValue * progress;
cat.style.transf...
Vanilla JS - requestAnimationFrame
JS function moveCat() {
. . .
currentValue = changeInValue * progress;
cat.style.transf...
Vanilla JS - requestAnimationFrame
JS function moveCat() {
. . .
currentValue = changeInValue * progress;
cat.style.transf...
JS animation libraries
Comparing JavaScript animation libraries…
TweenMax.to( box, 1,

{opacity:0.5, x:800, ease:Power2.easeIn}

);
Velocity(box, 

{opacity: 0.5, translateX:"+=800"}, 

{...
~7 - 29kb ~14.4kb ~4.7kb
back to IE8* back to IE8 back to IE10
Docs + forums Docs + SO Docs
drawSVG, morphSVG, Draggable d...
JavaScript
In Summary
Where it shines:
• Complex UI animation
• Animation with dynamic states
• Immersive animation
Bigges...
SVG
What SVG is great at:
SVG • Animated illustrations
• Animated icons
• Infographics and dataviz
• Fluidly scaling, responsi...
SMIL
• Tag-based animation within
SVG
• No IE or Edge support
• Being deprecated in Chrome
😕 🙂 😁
CSS
• Transitions and key...
github.com/bodymovin/bodymovin
airbnb.design/lottie/
lottiefiles.com
SVGIn Summary
Where it shines:
•Animated illustrations & infographics
•Shape morphing
•Motion along a path
Biggest Pro:
•R...
You have encountered an interface that requires animation.
What would you like to use?
(1) …?
Designing Interface Animation
designinginterfaceanimation.com
Thank you!
Newsletter: uianimationewsletter.com
Let’s chat on twitter: @vlh
Typeface: Brandon Text | Illustrations by Rach...
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Upcoming SlideShare
Loading in …5
×

Choosing your animation adventure - Ffronteers Conf 2017

867 views

Published on

As seen at Fronteers 2017 in Amsterdam

Published in: Design

Choosing your animation adventure - Ffronteers Conf 2017

  1. 1. Choose Your Animation Adventure Val Head • #fronteers
  2. 2. You have encountered an interface that requires animation. What would you like to use? (1) CSS? (2) JavaScript? (3) SVG? (4) …?
  3. 3. CSS Key Frames Transitions
  4. 4. What CSS is great at: • Well-defined state transitions • Loading animations, looping animations • Animations on :hover, :focus and similar CSS
  5. 5. Pros: • No external library needed • Great potential for performance without much effort • Keyframes are reusable • Can adjust properties in media queries for responsive animation when needed CSS
  6. 6. Cons: • Access to limited events • Defined entirely ahead of time • Can’t separate transform properties* CSS
  7. 7. CSS + JS = 🙌
  8. 8. CSSIn Summary Where it shines: • Animated interactions with defined states • Simple interactive animations Biggest Pro: • Nearly effortless performance • No additional requests
  9. 9. CSS is pretty great, but it might be 
 time to move to JavaScript if: • You’ll be chaining more than 3 animations in a sequence • The animation needs to change dynamically at runtime • Need to animate transform properties separately • Physics or other complex easing structures are required
  10. 10. VanillaCanvas Web GL react Libs Web Animation API JS
  11. 11. What javascript is great at: JS • Complex animated interactions • Narrative or immersive animation • Dynamic state transitions
  12. 12. requestAnimationFrame
  13. 13. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  14. 14. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  15. 15. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  16. 16. Vanilla JS - requestAnimationFrame JS function moveCat() { . . . currentValue = changeInValue * progress; cat.style.transform ="translateX("+currentValue+"px)"; . . . requestAnimationFrame(moveCat); } moveCat();
  17. 17. JS animation libraries
  18. 18. Comparing JavaScript animation libraries…
  19. 19. TweenMax.to( box, 1,
 {opacity:0.5, x:800, ease:Power2.easeIn}
 ); Velocity(box, 
 {opacity: 0.5, translateX:"+=800"}, 
 {duration: 1000, easing:"easeInQuad"}); anime({ targets: box, opacity:0.5, translateX: 800,
 duration: 1000, easing: 'easeInQuad'
 });
  20. 20. ~7 - 29kb ~14.4kb ~4.7kb back to IE8* back to IE8 back to IE10 Docs + forums Docs + SO Docs drawSVG, morphSVG, Draggable drop-in replacement for jQuery very lightweight Some features and licensing 
 requires $ MIT licenseMIT license
  21. 21. JavaScript In Summary Where it shines: • Complex UI animation • Animation with dynamic states • Immersive animation Biggest Pro: • Lots of options for how to get it done • Can animate DOM, SVG, canvas
  22. 22. SVG
  23. 23. What SVG is great at: SVG • Animated illustrations • Animated icons • Infographics and dataviz • Fluidly scaling, responsive animation
  24. 24. SMIL • Tag-based animation within SVG • No IE or Edge support • Being deprecated in Chrome 😕 🙂 😁 CSS • Transitions and keyframe animations can be applied to SVG elements • Limited number of properties are exposed to CSS • Transforms not supported in IE or Edge JS • Can access/animate native SVG properties • Can do motion along path, shape morphing and more just like SMIL*
  25. 25. github.com/bodymovin/bodymovin
  26. 26. airbnb.design/lottie/
  27. 27. lottiefiles.com
  28. 28. SVGIn Summary Where it shines: •Animated illustrations & infographics •Shape morphing •Motion along a path Biggest Pro: •Responsive by nature •Potential for tiny file sizes
  29. 29. You have encountered an interface that requires animation. What would you like to use? (1) …?
  30. 30. Designing Interface Animation designinginterfaceanimation.com
  31. 31. Thank you! Newsletter: uianimationewsletter.com Let’s chat on twitter: @vlh Typeface: Brandon Text | Illustrations by Rachel Sager

×