Part of course:
- What makes for a good animation?
- Animation Principles
- Duration and easing
- Secondary Action
- Follow Through and Overlap
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:
A good animation should be:
Of the 12 classic principles of animation, three are particularly important to interface design:
We will look into each in this tutorial.
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 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 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 wit easing choices and keyframe placements also go a long way.