Motion

Motion and animation can be helpful and communicative, if used with restraint. Motion is most often appropriate as a form of subtle feedback for microinteractions, by providing feedback. It can also be used to attract attention.

Coming Soon!

This article is meant to provide high level guidance around the use of motion. However, motion is not currently available as tokens in Canvas.

Usage Guidance

Purpose

All UI animations must have a known purpose. This intent might be to solve a design problem, or to communicate the personality of our brand. How to identify an animation’s purpose in detail will be covered later.

Avoid Creating Obstacles

Animation should not get in the way of the user completing their task. An animation would never intentionally increase the difficulty of a task, but it can be easy to get carried away while designing something visually pleasing. Avoid extra flourish and unnecessary amounts of time. Instead, keep animations simple, fast and direct.

Loading and fetching states are an exception; there are moments when waiting can’t be avoided.

Deliver Delight

As mentioned above, when waiting times can not be avoided, use it as an opportunity to express our brand identity while also bringing delight to the user in moments of frustration. Fun is one of our core values, after all.

Keep It Flexible

Good interface animations need to be flexible and always feel responsive to a user’s input, even while the animation is moving. Think of it like a conversation. If a user starts to realize their input is being skipped or ignored, trust is lost, and the quality of their experience begins to degrade. Non-blocking animation builds trust by always responding to the user’s input, no matter where in the animation they currently are. The timing of the animation can also vary depending on the size of the UI transition (that is taking place although are generally classed with a range of 200ms - 500ms.)

Focus on the Interaction

Although animations should be fast, it is important to take your user’s task-based mindset into account when deciding on multiple animation factors. To continue with the conversation metaphor, the animations should always feel good to interact with. Judge this by trying out the animation for yourself in context, as well getting outside opinions. This falls back on animations being flexible, even if the timing is outside the recommended range, but it feels right.

Keep Performance in Mind

Animations that are slow to interact with on the web negatively impact the experience. Poor performance can nullify even the most thought out experience. Animations should use the most efficient properties. Offsets can be used to lighten the cognitive load of many objects animating, while also enhancing a user’s perceived performance.

Behavior

Easing Values

Animation TypeValue
Entering ScreenEase Out
Exiting ScreenEase In
Change in Color/OpacityLinear 200ms
Movement within ScreenEase

Note: In the case where you're just fading between two colors, opacities, etc. always use a duration of 200ms.

Durations for Moving Objects

The larger the object being animated or the further the object is traveling, the longer the duration (100-500ms).

Do's and Don'ts when Using Motion

Do
  • Do use values suggested in the table.
  • Do create prototypes to communicate motion with developers.
Don’t
  • Don’t deviate from the suggested easing functions.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section