Motion Standards

Motion standards create consistent interface behaviour — motion should remain restrained and purposeful.

01 — Purpose

Consistent motion language

Motion standards create consistent interface behaviour — motion should remain restrained and purposeful.

Without shared timing and easing, every component animates differently — modals bounce, toasts slide too far, hovers lag. Motion standards give teams a small vocabulary that scales across the product.

See design tokens, accessible motion, and reduced motion strategy.

02 — Principles

Motion supports clarity

Motion should support clarity — not compete for attention.

  • consistent timing — shared duration tokens for fast, standard, and slow transitions
  • reduced motion support — honour prefers-reduced-motion in every animation path
  • predictable transitions — same interaction, same motion every time

03 — Practice

Good motion standards

Tokenise duration and easing; document when motion is allowed.

  • define motion tokens — --duration-fast, --ease-standard in settings
  • limit motion to state change — open, close, reorder, success, error
  • provide reduced-motion overrides — instant or opacity-only alternatives
  • document allowed properties — prefer transform and opacity over layout animation
  • review new animation in accessibility QA — see accessibility QA checklist

04 — Avoid

Motion overload

Decorative motion without standards becomes noise.

  • excessive animation — everything moves on page load
  • inconsistent easing — bounce here, linear there, custom cubic-bezier everywhere
  • decorative motion overload — motion that does not explain change
  • hard-coded durations in components — bypassing shared tokens
  • ignoring reduced motion — full animation for all users regardless of preference

05 — Close

A small motion system

Three durations and two easings beat fifty one-off transitions.

Add motion tokens to your design system. Reject PRs that introduce new timing without a token or documented exception. Pair with accessible motion guidance for inclusive defaults.

See design tokens, accessible motion, and rendering performance.