Principles

Motion enhances digital experiences without risking coherence or comfort. Purposeful, well-implemented motion design adds character and meaning to the digital experience.

Applied motion or animation should abide by the following five principles:

• Focused: Motion should direct users towards an action or important piece of data.
• Behavioral: Motion should be triggered by user behavior and interaction.
• Natural: Motion should have visual weight that's relative to its shape, size, directionality, and velocity.
• Informative: Motion should provide context and information without requiring additional actions.
• Consistent: Motion should be consistent across the experience.

Patterns

Easing

As objects move, they tend to accelerate and decelerate. Easing defines how we visually represent the weight and velocity of an object over the course of an animation.

Duration

In the real world, larger objects tend to move slower than smaller objects. When we apply duration to our animations, we consider the larger the size of the object or the distance it needs to travel, the longer the animation should take.

Stagger

Hierarchy generally is defined by elements visually appearing larger or smaller. Creating offset in our animations allows us to reinforce the hierarchy by displaying elements as separate but related.

Transformation

Scale, position, and rotation are all properties of transformations in animation. We use transformations to transition the user through different states of an interaction.

Parallax

When two elements move at different rates, this is what’s known as parallax. We deploy parallax to aid in supporting the separation of immediacy content from supportive content.

Usage

Guidelines