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.

PrinciplesCopy URL

IntegrityCopy URL

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.

IntentionalityCopy URL

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

ConsistencyCopy URL

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 AppealCopy URL

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 GuidelinesCopy URL

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 animationCopy URL

Use these principals, examples and tokens to create consistant, lifelike animations that delight and/or help inform the user.

EasingCopy URL

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)

DistancesCopy URL

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

ShortCopy URL

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

MediumCopy URL

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

LargeCopy URL

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

FadesCopy URL

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

Fast fadeCopy URL

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

Medium fadeCopy URL

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 fadeCopy URL

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

CombosCopy URL

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 distanceCopy URL

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 distanceCopy URL

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 distanceCopy URL

Slow fades are used for large elements traveling long distances. Think layers. Use the slow duration token.

TokensCopy URL

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

ResourcesCopy URL

Using Motion in codeCopy URL

Design token documentation