Motion

Overview

Motion, or animation, is the speed at which UI elements change.

How to use motion

Consistently

Most of our animations have a duration of 250 milliseconds. Use this speed consistently, unless the element has a long way to travel. Read below.

Variably

The longer something has to travel, the slower it should animate. It’s jarring to have an animation speed of 250 milliseconds for something that has to move across the entire screen. This typically does not happen until after 500px of movement.

Limitedly

Use animation only for interactions — do not animate page transitions. Motion should enhance the user experience by making interactions more fluid, not be used for decoration.