5 examples of web animation done right

Animation is a big part of user experience. It can be a visual cue to let a user know something is happening, it can add in unexpected delight, and so much more.

But it’s way too easy to go overboard with animation and wind up with something that just confuses or overwhelms users.

Let’s take a look at 5 examples of web animation done right and the biggest lesson we can learn from each one.

Don’t animate several elements at once

Here’s an example: You may want to animate a really awesome hero design that includes text, illustrations, and a call to action.

Well, the worst thing you can do is totally distract your user by animating too many elements in that hero. With too much going on, people won’t know where to go next. Except somewhere else.

Related: Animation principles in UI

Think of each animation as a story—it should be easily digestible and guide the user to elements you want them to see in a certain order.

I suggest animating one element at a time and adding .5–1 second of separation between animations.

In this killer example from InVision’s Anton Aheichanka for Craft, we can see how to animate several elements without going overboard:

Make it meaningful

Random animation with no purpose? Nope.

Be mindful of the product or service you’re trying to promote. Sadly, the perfect illustration we designers tend to come up with isn’t actually what our client is trying to promote—it just looks beautiful, and that’s it.

“Just say no to meaningless animation.”

So, when animating something, ask yourself if you’re keeping your client’s objective in mind. Just as important: Ask whether you have your user’s best interest in mind.

This fun animation by Sergey Valiukh has purpose and then some—most notably, the transition from AM to PM. Static graphics would have the same effect but wouldn’t be as dynamic.

Watch the time

Keep animations short and purposeful. The last thing someone wants is to have to wait for your fancy button to animate before they can click on it.

Here’s an example illustrating a quick snapping button transition that also has purpose.

Just say no to boring linear animation

Motion with just a simple A-to-B path with no easing feels robotic, so try adding different easing animations.  Motion should also follow forces similar to those of the real world, like gravity.

Remix Jobs is great at keeping animations interesting without overdoing it. Nice, smooth transitions using the material design methodology.

Animation shouldn’t be an afterthought

When you’re creating sketches or wireframes, think about how your elements will be animated. To make meaningful animations, you need to take time at the beginning of a project to really think about how they’ll fit into the user experience.

The Ramotion team shows us a nice example of thinking about animation/transitions during the wireframing stage.

Like design, animation can be subjective and personal. It’s so important to think about the people who will interact with the animations you create—every element should be carefully thought out so it adds to the overall user experience.