design

Speed

Animations speed provide smoothness and responsiveness.

Every animation speed is defined by two crucial adjustments, the duration (how long the transition lasts) and the easing (acceleration/deceleration over time). While controlling animations and transitions between elements states, using the correct speed is essential to help users understand UI changes without complicating the task.

Durations

Transitions should not be discordant during the animation, too fast or too slow. The proper adjustments between duration and easing produce beautiful, smooth, and clear transitions.

Durations should be applied based on the animation type and the distance/size of the motion. Functional transitions are significantly faster than evocative ones, and they should be defined based on the distance (traveled) or size (scaling) of the involved elements.

We provide a set of durations tokens:

{
  "100": "0.10s",
  "200": "0.20s",
  "250": "0.25s",
  "300": "0.30s",
  "500": "0.50s",
  "750": "0.75s",
  "1000": "1.00s"
}

json

Exits / Closing

When an element is closed, dismissed, or collapsed, a shorter time duration should be applied. In contrast, the duration of the exit transition may be faster because less attention is required than the following user's task.

Sliding

Sliding transitions over a small area use a short timing, while elements that must traverse large rooms have a longer duration.