Pathwise

Manuals / Motion for Product / Chapter 6

B · Patterns · intermediate · ~30 min · Chapter 6 of 9

Accessibility & performance

prefers-reduced-motion is mandatory. Vestibular triggers (large zooms, parallax) can harm. Prefer transform/opacity for perf.

Path progress
67%

Step 1 of 1

Respect reduced motion

Replace motion with instant state or simplified fade.

Respect reduced motionDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Respect reduced modrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Do this now

Add a reduced-motion variant to one prototype or CSS snippet.

Was this step clear?
Chapter learning outcomes
  • Reduced motion
  • Vestibular safety
  • Compositor-friendly props

Clear these before you leave