Let’s move

When done well, animations can bring delight and add personality to your interface. In fact, the word animate comes from the latin animare, meaning “bring to life”.

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface.

No animation is unnatural

You click on a “New” button and a form just… appears from nowhere? You click a “X” to close a modal and… it just vanishes into thin air? That is unnatural and it’s what we should be avoiding as designers. Nothing in the real world does anything as jarringly as just swapping states. If that happened it would feel like a glitch in the matrix.

Take for instance the carousel interface below: without any animations, could you tell that it is indeed a carousel interface? Are we offering the user any clues other than changing the background color and emoji when we swap the panels?

If you disable the animation at the top of this article, you’ll instantly notice that something feels off, in fact it looks broken. The cards are still changing, but we can barely see it. With the animation enabled, it’s easier to understand the relationship between the elements and the flow between different states – you can see the depth of the interface, and ultimately, it fells natural.

What makes a good animation

So we know we should animate, but what makes for a good animation? What should we focus on?

First, animation is all about timing:

• Try to keep your animations fast: usually around the 300ms mark
• Animate things independently: stagger individual elements instead of animating big blocks
• Always use custom easings: the default ones are crap

Second, if you are working with CSS you should animate exclusively using opacity and transform properties. You might need to get creative, but any other property will trigger a browser layout or paint, which are expensive operations. That’s the only way to keep your animations running at a smooth 60fps rate.

The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. The higher up you start on the timeline waterfall the more work the browser has to do to get pixels on to the screen.

That’s about it. Remember that having fun is the best way to get the best results. Go the extra mile, play, experiment, and be happy with what you do.

Try. Iterate. Polish.