Native Web Animation

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.