Description

Motion can improve user experience when employed correctly. It can guide users, attracting their attention to events and actions, and reflecting their progress. You can use it to spice up your interface – from microinteractions with small elements, to the behavior of major components – but always remember that motion must have a purpose.

Principles

Motion is Functional

Motion helps users maintain flow, drawing attention to screen changes both small and large, and increasing the perceived speed of the task.

Motion is Intentional

Objects must have a motivation for their movement. There should be a reason for why something moves the way it does.

Motion is Expressive

Motion delights users with unexpected details that turn mundane moments into something special and memorable. These details remind users that experiences are crafted by people, not machines.

Connect actions to outcomes

Motion provides a visual response to an action, seamless transitions between states help focus and guide users to complete tasks.

Durations

Refer to semantic tokens list, to find tokens we use for controlling motion in the components.

Durations

Token	Value	Usage
extra-slow	500ms	Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)
slow	400ms	Should be used for more larger scale animations (such as page transitions)
medium	300ms	Should be used for more complex effects (such as Modal)
fast	200ms	Should be used for more complex effects (such as Dropdown or Accordion)
extra-fast	100ms	Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)

Easing

Accessibility

When using animation, you want to avoid the following effects:

1. Provoking seizures in people with photosensitive epilepsy.
2. Distracting users and breaking their workflow.
3. Trapping them in animation sequences.

To prevent these issues, we recommend you follow these best practices:

• Don't use flashing of more than 3 times per second in your animation.
• Limit component animation to no more than a couple of seconds at a time.
• Let users opt out of animation altogether, if that's what they prefer. Use preferes-reduced-motion CSS media feature for this.