Animations can spice up any presentation or app development.
Animations can be used to create a flow. They can highlight or soften changes, create excitement, and catch the eye.
Animations can be great but it is important to understand how to use them.
This guide will show you how to make simple animations that will never fail.
Rule 1: Don’t use childish animations
Too many poor animations have been used by speakers.
Dumb animations can be easily identified: they don’t have a consistent direction and they don’t contribute to the flow or presentation. Usually, we (the audience) want them to end.
There are many animation types, but this is a trap. Most of these types are not recommended.
Rule #2: Choose a simple direction of movement and follow it
Choose a direction for your software animation or slides transitions and follow it throughout the show.
This animation can be used in presentations and in your app (i.e. A toast will fly in from the bottom with a brief status update.
Rule #3: Allow for a slight delay between each animation
You can spice it up by adding a short delay between each animation.
This is a very short delay, maybe 0.15 seconds.
Important: Don’t wait for the second animation to start. Start animating the second elements a few milliseconds after your first element has moved.
Rule #4: Nature doesn’t move in a straight line
Do you remember kinetic energy? People are used to watching elements accelerate and decelerate when they move, or at the end of their movement.
You can adjust the animation’s ease-in and ease-out in most animation tools (whether you’re using PowerPoint to present or develop UI).
This is one of the most important rules for animations. If you want to create natural motion, make sure that your animation is smooth.
You shouldn’t use too many options: In most languages of development, you can combine ease in/out. However, I have found that it is better to keep it simple.
Rule #5: Combine small delays with slow endings — this is the winning formula
The smooth ending is combined with a short delay between elements.
It is a combination rule #3 and #4. This is the best way to create movement.
The first element is slowed down (ease out), while the second and three elements continue to move in, creating an interesting and natural motion.
This animation is my favorite. The result is amazing, even though it seems very simple.
Let’s conclude.
Use no animations
A simple flow can create a natural motion.
Do not try to move all elements at once. Give each element a brief delay from its starting point.
Use the ease-out option to ensure that your animations have a smooth ending
This article was originally intended for the mobile spoon.
Follow me on Twitter and be my friend!