accessible-animation

Write motion as the default, then override under the @media (prefers-reduced-motion: reduce) query. Use a global safety net with animation-duration and transition-duration set to 0.01ms (not 0s, which breaks transitionend listeners), then layer targeted overrides that remove transforms while keeping opacity fades.

Use gsap.matchMedia() with conditions for no-preference and reduce, defining full motion in one branch and short opacity fades in the other. GSAP automatically reverts tweens and restores styles when the OS setting changes, so cleanup happens without manual teardown.

Yes. Setting MotionConfig reducedMotion="user" at the app root makes every child motion component drop transform and layout animations while keeping opacity. For per-component control, use Framer's own useReducedMotion hook to swap variant definitions.

Setting durations to 0s prevents animationend and transitionend events from firing, which breaks JavaScript that waits on those events. Use 0.01ms instead so the events still fire while the motion appears instant.

No. Removing everything causes teleporting elements and strips useful affordances like focus rings and loading spinners. Classify motion into tiers: remove parallax and large movement, soften small entrances into short fades, and keep opacity, color, and essential feedback motion.

Use Chrome DevTools Rendering panel to emulate the media feature, or run Playwright screenshots with --reduced-motion=reduce. For JS-gated code, add a URL parameter like ?reduce=1 that forces the reduced code path since CSS media queries cannot be toggled from JavaScript.