A presentation at FullStack London in in London, UK by Val Head
Choose Your Animation Adventure Val Head • @vlh Author of Designing Interface Animation Design Advocate, Adobe
You have encountered an interface that requires animation. What would you like to use? (1) CSS? (2) JavaScript? (3) SVG? (4) …?
CSS Key Frames Transitions
What CSS is great at: • Well-defined state transitions • Loading animations, looping animations • Animations on :hover, :focus and similar CSS
Pros:
•
No external library needed
•
Great potential for performance without much
e
!
ort
•
Keyframes are reusable
•
Can adjust properties in media queries for
responsive animation when needed
CSS
Cons: • Access to limited events • Defined entirely ahead of time • Can’t separate transform properties* CSS
!
CSS In Summary Where it shines: • Animated interactions with defined states • Simple interactive animations Biggest Pro: • Nearly e ! ortless performance • No additional requests
CSS is pretty great, but it might be
time to move to JavaScript if:
•
You’ll be chaining more than 3-ish 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
Vanilla Canvas Web GL react Libs Web Animation API JS
What javascript is great at: JS • Complex animated interactions • Narrative or immersive animation • Dynamic state transitions
requestAnimationFrame
Vanilla JS - requestAnimationFrame
JS
const moveCat = ()
!”
{
…
currentValue = changeInValue * progress + startValue
cat.style.transform = translate3d(${currentValue}px, 0, 0)
…
requestAnimationFrame(moveCat);
}
moveCat();
Vanilla JS - requestAnimationFrame
JS
const moveCat = ()
!”
{
…
currentValue = changeInValue * progress + startValue
cat.style.transform = translate3d(${currentValue}px, 0, 0)
…
requestAnimationFrame(moveCat);
}
moveCat();
Vanilla JS - requestAnimationFrame JS const moveCat = () !” { … currentValue = changeInValue * progress + startValue
cat.style.transform = translate3d(${currentValue}px, 0, 0)
…
requestAnimationFrame(moveCat);
}
moveCat();
Vanilla JS - requestAnimationFrame
JS
const moveCat = ()
!”
{
…
currentValue = changeInValue * progress + startValue
cat.style.transform = translate3d(${currentValue}px, 0, 0)
…
requestAnimationFrame(moveCat);
}
moveCat();
JS animation libraries
Comparing JavaScript animation libraries…
TweenMax.to( box , 1 , { opacity:1, x:800 , ease:Power2.easeIn } ); Velocity( box , { opacity: 1, translateX:”+=800 “}, { duration: 1000 , easing:”easeInQuad” }); anime({ targets: box ,
opacity:1, translateX: 800,
duration: 1000,
easing: ‘easeInQuad’ });
~9 - 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 license MIT license *These are not the only JS animation libraries out there.
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
SVG
What SVG is great at:
SVG
•
Animated illustrations
•
Animated icons
•
Infographics and dataviz
•
Fluidly scaling, responsive animation
SMIL •
Tag-based animation within SVG • No IE or Edge support • Future in Chrome uncertain “
$ CSS • Transitions and keyframe animations can be applied to SVG elements • Limited number of properties are exposed to CSS • Transforms on child elements not supported in IE* JS • Can access/animate native SVG properties • Can do motion along path, shape morphing and more just like SMIL
airbnb.design/lottie/
lottiefiles.com
github.com/airbnb/lottie-web
SVG In Summary Where it shines: • Animated illustrations & infographics • Shape morphing • Motion along a path Biggest Pro: • Responsive by nature • Potential for tiny file sizes
PERFORMANCE
size
composite paint layout style
CSS JavaScript • CSS is declarative (whole animation is known ahead of time) • CSS animations with transform & opacity won’t be impacted by the main thread • JS is imperative (browser only really aware of the current frame) • Hardware acceleration isn’t automatic
SVG & Hardware Acceleration?
•
Not all browsers support it
•
Good performance in general without it though
You have encountered an interface that requires animation. What would you like to use? (1) …?
Designing Interface Animation designinginterfaceanimation.com 20% O ! : “valhead”
Animation has come a long way on the modern web and we have a long list of choices for how to make something move on screen: CSS, JavaScript, SVG, the Web Animation API. With so many options, how can you be sure which is the best choice for your project? This talk is all about helping you choose the animation option that best fits your project at hand.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.