Core

Motion

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.

Ease in

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.

Example
Tokens
Sass
$Motion-ease--in
CSS
--motion-ease--in
Javascript
MOTION_EASE_IN
Timing Function
cubic-bezier(.4, 0, .7, .2)

Ease out

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.

Example
Tokens
Sass
$Motion-ease--out
CSS
--motion-ease--out
Javascript
MOTION_EASE_OUT
Timing Function
cubic-bezier(0, 0, .2, 1)

Ease inout

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.

Example
Tokens
Sass
$Motion-ease--inout
CSS
--motion-ease--inout
Javascript
MOTION_EASE_INOUT
Timing Function
cubic-bezier(.4, 0, .2, 1)

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.

Nurturing plants

How not to kill the house plants your sweet aunt Mildred left you in her will.

Start pruning today ›
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.

Message has been sent!
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.

Justyn
@Justyn
Social Media is the bees-knees!
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.

Duration fast
Sass
$Motion-duration--fast
CSS
--motion-duration--fast
Javascript
MOTION_DURATION_FAST
Value
.15s
Duration medium
Sass
$Motion-duration--medium
CSS
--motion-duration--medium
Javascript
MOTION_DURATION_MEDIUM
Value
.3s
Duration slow
Sass
$Motion-duration--slow
CSS
--motion-duration--slow
Javascript
MOTION_DURATION_SLOW
Value
.6s

Resources

Using Motion in code

Design token documentation