Motion is used to convey spatial relationships, functionality and intention.
From Disney to Giphy, animation has evolved over time. But there are guidelines and principles that have helped shape the way animations are created and interpreted. Animation brings life to otherwise static objects and it simplifies complex concepts. When a design transforms from a static object to something that changes over time, it creates an entirely new experience.
Preface: These principles and guidelines depend greatly on the purpose and application of the animation. Principles will be evident at different levels, but should be applied as best as possible.
Story is what brings structure and emotion to an anecdote. Stories feature protagonists that must overcome a set of challenges to reach their goals and progress through a character arc. Overall, animations should focus on progressing the story forward, building a sense of anticipation, helping the audience identify with and root for the main character.
Animation is essentially hundreds of individual images in sequence. Each image in a sequence should be as strong as the last. For example, as an object scales up or down, the outline of the object should maintain the same thickness throughout the animation.
Objects must have a motivation for their movement. There should be a reason for why something moves the way it does.
Elements should operate within a consistent set of physics. These physics do not have to be real-world, but should be consistent with the animation’s established rules.
All things should work in concert to evoke an emotional experience from the audience. Some ways to do this would be through surprise and delight, anthropomorphization, or detailed expressions.
The amount of time it takes for an action to take place. Like most animation guidelines, timing should be thoughtful and appropriate for every situation.
The term comes from describing the space between two frames of a moving object. Objects should have variable spacing to achieve easing.
Timing and spacing work in tandem to influence the easing of an action. Objects should accelerate into and decelerate out of movements.
Movement to prepare the audience for an action. A wind-up, bounce, recoil or overshoot each creates an expectant feeling. Anticipation helps create momentum and establishes realistic physics. It also draws the audience’s eye to an object before it moves.
Objects rarely move on a straight path in the real world, including mouse clicks. To create a simulation of what is natural, curved paths should be considered in object movement.
A second element that emphasizes or reinforces the movement of the primary element. This could be a speed line, secondary object, or additional parameter.
Animating objects beyond the parameters of real-world physics. This is done for dramatic or visual effect.
Objects should have spatial and temporal weight of some kind, in either 2D or 3D space.
Guidelines for UI animation
Use these principals, examples and tokens to create consistant, lifelike animations that delight and/or help inform the user.
Easing dictates the velocity at which objects travel through space over the course of an animation.
Ease-in animations start slow and end fast. Think of a penny being dropped from a bridge–starting slowly as it is released and stopping abruptly as it crashes into the ground. This timing function is best used for removing an object from the screen.
cubic-bezier(.4, 0, .7, .2)
Ease-out animations start fast and slowly decelerate. Think of a baseball forcefully connecting with a bat and slowly descending into the bleachers. Due to the abrupt start and slow finish, ease out is most appropriately used when introducing an object from off the screen.
cubic-bezier(0, 0, .2, 1)
Ease-in-out animations start slow, speed up and slow down at the end. Think of a car accelerating quickly and then slamming on the breaks. This type of timing function is ideal for moving objects already on the screen from one spot to another.
cubic-bezier(.4, 0, .2, 1)
Distances are broken down into three sizes. Each distance uses a unique timing that seeks to emulate real-world physics.
25% or less of the total view width. Use the fast duration token as it takes less time to go a short distance.
26% - 50% of view width. Use the medium duration token.
51% - 100% of view width. Use the slow duration token as it takes more time to go a long distance.
Fades are used to elegantly transition color and/or opacity.
Fast fades are used in your small, everyday interactions. Think buttons, list items. Use the fast duration token.
Medium fades are used for medium sized interactions. Think cards.
How not to kill the house plants your sweet aunt Mildred left you in her will.
Slow fades are used for large scale elements or events. Think empty states, initial load. Use the slow duration token.
Examples using distance and fade together to create a cohesive animation. You can see an example of animation using multiple curves in this CodePen.
Fast fade, short distance
Fast fades are used on small elements traveling short distances. Think alerts, menus. Use the fast duration token.
Medium fade, medium distance
A medium fade is used on medium sized elements traveling medium distances. Think modals, messages leaving streams. Use the medium duration token.
Slow fade, long distance
Slow fades are used for large elements traveling long distances. Think layers. Use the slow duration token.
Use these tokens in accordance with the principals and examples above.
- The ultimate guide to proper use of animation in UX
- Material Design Motion Guidelines
- 12 Principles of Animation
- Creating Usability with Motion: The UX in Motion Manifesto
- Choosing the Right Easing
- Choosing the Right Easing
- CSS Triggers