Variables

A set of legacy duration and curves variables to apply motion in your application.

Caution

The duration and curve variables will soon be deprecated. Please use the new motion design tokens instead.

Duration

There are three durations available, each size increases in duration. Use a larger duration for an element that moves a large distance, or is a large element.

import {
  durationStep,
  smallDurationMs,
  mediumDurationMs,
  largeDurationMs,
} from '@atlaskit/motion';

All durations are multiples of durationStep. Do the current durations not fit your purpose? No worries! Make sure to create a custom one from durationStep.

Duration decision matrix

Use this table if you're unsure what duration you should use.

	Small element	Large element
Short distance	`smallDurationMs`	`mediumDurationMs`
Long distance	`mediumDurationMs`	`largeDurationMs`

Curves

There are three curves available, each used for a particular user interaction, or how the element appears.

import { easeInOut, easeIn, easeOut } from '@atlaskit/motion';

Curves decision matrix

Use this table if you're unsure what curve you should use.

	`easeInOut`	`easeOut`	`easeIn`
When to use	When an element has been interacted with indirectly.	When an element has been interacted with directly. When an element appears from off screen.	Use rarely. Only used if an element is moving indirectly entirely off the screen.
Example use case	A user clicks a button, and a separate element moves.	A user clicks an element, and that same element moves. A drawer appears from off screen.	A user clicks a button which spins and waits. After the operation is finished the button enters a confirmed state and the modal slides entirely off the screen.

Was this page helpful?

We use this feedback to improve our documentation.