Animation, or motion design can make your user interface easier to use by adding visual cues that inform the user about the behavior of a function or the result of an action. It provides:

• guided transitions between two views
• hints about what will happen if the user completes a gesture
• hierarchical and spatial relationships between elements
• distraction from what’s happening behind the scenes, like content being fetched etc.

What makes for a good animation?

A good animation should be:

1. Quick: It should not keep the user waiting longer than necessary. The animation should feel that it was quick and snappy, as opposed to wasting the user’s time.
2. Clear: Simple and coherent transitions that avoid doing too much at once are usually the best.
3. Cohesive: All the animations should be consistent throughout your app. They should feel related.

Animation Principles

Of the 12 classic principles of animation, three are particularly important to interface design:

• Duration and easing
• Secondary Action
• Follow through and overlap

We will look into each in this tutorial.

Duration and easing

Duration represents how long an animation takes. In web animation, the timing function is called “easing”. This determines how speed changes occur across the total length of your animation. Speed changes can add a dynamic element to an animation, while a static, or linear, easing maintains a constant speed — which is almost never advisable.

If you set a low, linear speed, for example, users might lose interest because the motion doesn’t look natural. A good duration and easing function, ideally, makes the object appear to obey the laws of physics — heavier objects seem to have more inertia. But for our purposes, we can think of these two in terms of the personality they impart to the object being animated. To effectively get the timing right, you should always try and prototype your animations using a prototyping tool like Framer, or even CSS if you can.

Secondary Action

Secondary action is a part of the animation that complements or reacts to the primary action.

For example, the Twitter heart animation features the primary action (the heart swelling up), followed by secondary action of the small dots flying out from it:

Follow Through and Overlap

Follow through and Overlapping are related concepts that deal with how an animated object comes to a stop. Follow through is the motion of slightly overshooting the final destination, and then coming back to settle into place. Similarly, overlapping is when not all parts of the object come to a stop at the same time. It’s usually very hard to get these concepts down correctly according to the laws of physics, but good approximations with easing choices and keyframe placements also go a long way.