Visual

Motion

Healthy

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.

Principles

Integrity

Story Integrity
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.

Design Integrity
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.

Intentionality

Objects must have a motivation for their movement. There should be a reason for why something moves the way it does.

Consistency

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.

Emotional Appeal

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.

General Guidelines

Timing

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.

Spacing

The term comes from describing the space between two frames of a moving object. Objects should have variable spacing to achieve easing.

Ease

Timing and spacing work in tandem to influence the easing of an action. Objects should accelerate into and decelerate out of movements.

Anticipation

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.

Arc

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.

Secondary Action

A second element that emphasizes or reinforces the movement of the primary element. This could be a speed line, secondary object, or additional parameter.

Exaggeration

Animating objects beyond the parameters of real-world physics. This is done for dramatic or visual effect.

Dimensionality

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

Easing dictates the velocity at which objects travel through space over the course of an animation.

Distances

Distances are broken down into three sizes. Each distance uses a unique timing that seeks to emulate real-world physics.

Short

25% or less of the total view width. Use the fast duration token as it takes less time to go a short distance.

Medium

26% - 50% of view width. Use the medium duration token.

Large

51% - 100% of view width. Use the slow duration token as it takes more time to go a long distance.

Fades

Fades are used to elegantly transition color and/or opacity.

Fast fade

Fast fades are used in your small, everyday interactions. Think buttons, list items. Use the fast duration token.

Medium fade

Medium fades are used for medium sized interactions. Think cards.

Slow fade

Slow fades are used for large scale elements or events. Think empty states, initial load. Use the slow duration token.

Combos

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.

Tokens

Use these tokens in accordance with the principals and examples above.

Resources

• 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
• Easings.net
• Cubicbezier.net
• CSS Triggers

Using Motion in code

Design token documentation