Motion

Micro animations can bring extra life to the screen, improve UI behavioural perception and guide users through complex experiences.

Best practices

Introducing movement to designs should always be done thoughtfully, keeping in mind what problem the transition or animation is attempting to solve. Motion should never be added just because it looks good!

Here is a checklist of things to consider when adding movement:

Clarify what problem adding motion is solving

Make sure it enhances the user’s understanding of an action

Use the appropriate easing and duration pair

Make sure the motion works effectively across all screen sizes. On mobile screens, subtle motions may be easily missed.

Keep motion unobtrusive. Find the balance of subtlety where the interface goes unnoticed but still feels natural to use to the user.

Refrain from using bouncing or elastic easing or movement suggesting sudden stops.

💡 Note: Linear transitions appears unnatural to the human eye and should be used sparingly.

Choosing a duration

Transitions covering small parts of the screen should have short durations.

Transitions covering large areas have longer durations.
Increasing the duration with the size of a transition area gives a more consistent sense of speed.

Transitions that enter or remain persistent on the screen use longer durations. This helps users focus attention on what's new on screen.

Transitions that exit, dismiss, or collapse an element use shorter durations. Exit transitions are faster because they require less attention than the user’s following task.

Easing

Elements on the screen should speed up and slow down smoothly and naturally. “Easing functions” describe the precise amount of accelerations/deceleration in each transition.

Standard easing The standard easing speeds up quickly and then comes to a gentle rest in order to emphasise the end of the transition. Use standard easing when an element is visible from the beginning to the end of a motion. Expanding tiles and resizing cards are examples.
Enter easing Entering elements quickly appear and slow down to a stop. Use entrance-easing when adding elements to the screen, such as a modal or drawer appearing. Elements expanding in response to the user’s input, such as a dropdown opening or toggle switching should also use this style.
Exit easing Use exit-easing when removing elements from view, such as closing a modal. The element speeds up as it exits from view, implying that its departure from the screen is permanent. Exception to the rule: if an element leaves the view but stays nearby, ready to reappear upon user action, use standard easing instead. A good example of this is a drawer. The panel leaves the view, but slows down as it exits, implying that it would come to rest just outside the view, and ready to be recalled.

Motion tokens

motion / duration

100ms

short-1

150ms

short-2

200ms

medium-1

300ms

medium-2

500ms

long-1

700ms

long-2

motion / easing

0px

standard

Use standard-easing when an element is visible from the beginning to the end of a motion.

0px

enter

Entering elements quickly appear and slow down to a stop. Use entrance-easing when adding elements to the screen, such as a modal or drawer appearing. Elements expanding in response to the user’s input, such as a dropdown opening or toggle switching should also use this style.

0px

exit

Use exit-easing when removing elements from view, such as closing a modal. The element speeds up as it exits from view, implying that its departure from the screen is permanent. Exeption: if an element leaves the view but stays nearby, ready to reappear upon user action, use standard easing instead. A good example of this is a drawer. The panel leaves the view, but slows down as it exits, implying that it would come to rest just outside the view, and ready to be recalled.