How to create a perfect animation with these 5 basic tips

Whether you are developing an app or working on a business presentation — you might want to spice things up with some animations.

Animations can help you create a flow, they can create progress, emphasize or soften changes, catch the eye, and cause delight.
Animations are great, but you need to know how to use them, otherwise they are just annoying.

In this guide I will try to explain how to create a simple animations that never fails.

Rule #1: Do not throw in childish animations

I’ve seen too many dumb animations being used by good speakers.
Dumb animations are easy to recognise: they do not have a consistent direction, they do not contribute to the flow of the presentation (or app) and usually we (the audience or the users) just want them to end.

The fact that there are so many animation types is a trap because most of these types are not recommended.

If you are not sure about what animation to select — don’t animate.

Rule #2: Select a simple movement direction and stick with it

Select a direction to your software animation (or slides transitions) and stick with it for the entire show.

Here’s an example of 3 elements flying in from the bottom of the screen.

This is a classic animation that can be used in presentations or in your app (i.e. a toast flying in from the bottom of the screen with a short status update).

In the example above, we bring all 3 elements from the same location. The animation is simple and creates a flow, but it doesn’t look sexy yet.

Rule #3: Create a tiny delay between each animation

You can spice things up by adding a very short delay between the animation of each element.

I’m talking about a really short delay, something like 0.15 seconds delay.

IMPORTANT: Do not wait to begin the second animation AFTER the first element finished, start animating the second element few milliseconds after the first element already started to move.

Example:

Element 1: enters in 0 seconds, 0 millisecond, animation takes 500 milliseconds
Element 2: enters in 0 second, 150 milliseconds, animation takes 500 milliseconds
Element 3: enters in 0 second, 300 milliseconds, animation takes 500 milliseconds

So infect, element 3 starts the animation before element 1 finished, but the short delay creates an enhanced motion experience.

See the result below — it makes things a bit more interesting although it’s still not perfect.

There’s something missing and I will explain it in a minute.

Moving elements one after the other — important to spice things up but still not perfect

Rule #4: Nothing in nature moves linearly

Remember kinetic energy? People are used to seeing elements accelerate or decelerate as they start to move or reach the end of their movement.

In most animation mechanisms (whether you are using PowerPoint for presentations, or developing UI) you will be able to find options to ease-in or ease-out the animation.

This is one of the most important rules of animations, so if you want to create a natural motion — make sure to ease out your animation.

Do not use too many options here: in most development languages you can combine ease-in/out but from my experience it’s better to stick with a simple ease out.

Hard to notice, but smooth ending makes the motion more natural

Rule #5: Combining tiny delays and slow ending — the winning formula

Combine the smooth ending with the short delay between elements.
It’s a combination of rules #3 and #4 and it’s the best way to create motion.

The first element slows down (ease out) while the second and third elements are still moving in and it creates an interesting and natural motion.

I use this kind of animation all the time, and even though the movement itself seems simple — the result is stunning.

This is how animations should look like: Elements are moving one after the other with a smooth ending

So to conclude:

1. Do not use dumb animations
2. Create a natural motion by applying a simple flow
3. Do not move all the elements at once — add a short delay between the starting point of each element
4. Make sure all your animations end slowly by using the ease-out option (smooth ending)

This post was originally written for the mobile spoon.
Be my friend on twitter!