A presentation at code.talks in in Hamburg, Germany by Lisi Linhart
I just want the coffee to be done.
Slowly it’s starting to make a noise, but it’s still taking another minute or two until it’s done. I’m getting really impatient.
I feel more like this. And with animation it isn’t that much different.
Animation should never delay the user in what he’s trying to do. Otherwise, small interactions and other transitions should be so seamless that users don’t even notice that there is animation.
Performance is a key factor in creating good animation. When we understand how to Browser works, we can create animations that perform well.
Here we’re animating the left property, which is really not performant. Instead we should use the CSS Transform property.
One the first step, some change happens, most likely an event is fired
Then we need to recalculate the styles depending on the change
Then the browser will calculate the layout, how much space does every element need?
Everything gets rasterised and put onto layers. Elements that are on different layers can be moved independently
Composite: Browser takes advantage of GPU, layers get glued together to 1 frame that the user sees
All of this has to happen in one frame, if we have long layout calculations, we get less frames per second
Layout is very expensive, because the browser needs to recalculate and go through all the following steps
With Paint the browser already knows how much space the element takes
Compositing is the most performant, because the browser doesn't have to figure out layout or paint.
Try to only animate with composite
Another important part is looking at your devtools and testing your animations.
Depeding on what CSS property you change, different stages in the rendering get triggered, some properties will trigger recalculations of style, while other’s only trigger composite.
Layers have been around for a long time. They originated in Cel animation, which was the core technique for doing traditional 2d animation. To create a cartoon, you would have transparent slates for each character and the different body parts and different layers for the background. By putting them on top of each other, cartoons could be created quicker and more efficiently than before.
There are also gotchas with layers.
don’t promote too many elements
promote elements to new layers if animated often & constantly
🤯 don’t create too many layers
animate elements on top layers
inspect & test your animations in your devtools
How can we animate on the web?
CSS
Loading animations are a great use case for CSS Animation, because you’re Javascript is probably still parsing and you want to take advantage of the GPU to show animations, while your Javascript is busy.
Reactive animation is one of the best examples for Javascript animation, pulling the user into the experience
CSS Variables offer a lot more flexibility than just doing Javascript manipulation on one single object.
CSS Variables are inherited from their parent, for better performance set them at the most specific level performance implications for setting CSS variables on a parent with a vast amount children.
They are in all major browsers and if you need to support IE, you could probably fall back to no animation on IE.
Splittingjs is a great example for using CSS Variables in combination with Javascript. It splits up words & letters by using CSS Variables and then animates them independently
No JS Stalling in CSS & WAAPI
Unfortunately there is not full support for the web animations api yet, but in Safari it’s already in the technology preview. In Edge we’re still waiting for signals
But if we take a look into the platform status of Edge, there are lots of votes on the Web Animations API and it’s under consideration, so there are good chances that it will be implemented in the near future.
How to animate with the WAAPI? keyframes object or array: stages of the animation timings object: how it's animated (e.g. speed, delay, ..)
One tiny library I want to mention is Animate Plus, which uses the web animations api under the hood and provides an easier way to work with staggering animations and making use of callbacks once the animation is finished.
There are a lot more easings, than just the regular ease-in and ease-out.
If we take a look at easings.net, these are easing we can use in CSS & JS
More complex easing can only be done in JS
When I started web animation and tried to find the right easing, I made a lot of use of the greenock ease-visualizer, which gives you direct feedback on how an easing can be denied
You can simple import easings you use a lot as CSS or SASS variables, so you don’t have to define them by hand each time.
So now we talked about a lot of native options on how to do native animation.
My key point is that you don’t always need a huge animation library to include useful animations in your project.
Web Animation has evolved greatly in the past years. Now that Flash is dead, a lot of new animation libraries have popped up. Nevertheless not everyone is doing web animations all the time and has the time to learn new libraries, so this talk focuses on the options of doing native animations with what the web platform has to offer. It tackles how browser animation actually works and what we have to be careful about if we want to create performant animation. It will also explain what the Web Animation API is, how it works and why it's different to Javascript libraries.
The following resources were mentioned during the presentation or are useful additional information.
Animation Newsletter
Slack Channel to discuss Animation
Here’s what was said about this presentation on social media.
for free. You
can too.