Reduced Motion Strategy

Some users experience discomfort from excessive movement — interfaces should respect motion preferences.

01 — Purpose

Respect user motion preferences

Motion affects accessibility significantly — some users experience discomfort, distraction, or nausea from excessive movement.

Operating systems expose a reduced motion preference. Interfaces should honour it: calm or remove non-essential animation while preserving enough change to stay oriented.

See accessible motion for purposeful animation principles and the accessibility standard for expectations.

02 — Principles

Interfaces should respect user motion preferences

Reduced motion is not “no motion” — it is calmer motion that still communicates change.

  • support prefers-reduced-motion: reduce in CSS and JS
  • reduce non-essential animation — decorative loops, parallax, autoplay
  • preserve orientation — users still need to know what opened, closed, or updated
  • keep transitions calm — instant or near-instant where full motion would distract

03 — Practice

A practical reduced motion strategy

Default to calm; opt into richer motion only when users allow it.

  • wrap decorative animation in a reduced-motion media query — disable or shorten it
  • prefer opacity and instant state change over large movement
  • pause or remove autoplay video and carousel motion
  • respect the preference in JavaScript-driven animation libraries too
  • test with reduced motion enabled in system settings — not only in devtools 
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

04 — Avoid

Motion that overwhelms users

Ignoring the preference forces users to leave or struggle.

  • parallax overload — scrolling that moves multiple layers at different speeds
  • autoplay motion — hero videos, animated backgrounds, looping GIFs
  • dramatic interface movement — full-screen slides for minor updates
  • constant animated distraction — pulsing CTAs, infinite spinners, bouncing badges
  • CSS-only fixes that break focus or layout when motion is reduced

05 — Close

Motion should support usability

Calm interfaces are inclusive interfaces — not boring ones.

Ship a reduced-motion path alongside your default experience. Users who need it will notice; users who do not will never miss the parallax.

See accessible motion, design tokens for duration values, and the accessibility QA checklist before release.