UX

5 examples of web animation done right

by

on

View all posts

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.

Animation

GIF for the Timeline App, by Sergey Valiukh

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.

Animation

Open, by Joe Jordan

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.

Event Website Design, by Julien Renvoye

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.

Read more posts like this
Author

Joe Jordan
Working as a Creative Director at JK design. With over 20 years experience, I've seen it all. I help supervise all creative production. Of course, I can't stay away from doing the actual work.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us