Fancy motion That still respects prefers-reduced-motion

Agencies ship parallax sections, magnetic buttons, text reveal animations, and rotating carousels. The motion looks impressive in stakeholder presentations. Nobody asks what happens when a visitor with a vestibular disorder loads the page.

prefers-reduced-motion is a system-level accessibility setting. When a user enables it, they're telling every application: I need less motion. Browsers expose it through a CSS media query and a JavaScript matchMedia check. Most marketing sites ignore it entirely.

The result is a site that looks polished for most visitors and causes discomfort, dizziness, nausea, disorientation, for others. It's not an edge case. Vestibular disorders affect a significant portion of the population, and the setting exists on every major operating system.

Motion (the successor to Framer Motion) provides a global configuration option for reduced motion. We wrap our application in <MotionConfig reducedMotion="user"> at the provider level. This tells every Motion animation in the entire application to check the user's system preference automatically.

When prefers-reduced-motion is enabled, Motion suppresses transform and layout animations. Opacity transitions can still run, a gentle fade is usually comfortable. The visitor still sees content appear and respond, just without the spatial movement that triggers vestibular symptoms.

This is a single line of configuration that covers every motion.div, every AnimatePresence, every layout animation in the project. Individual components don't need to check the preference themselves. The library handles it.

For specific components like our parallax sections, we also use the useReducedMotion hook from Motion to switch between the full parallax effect and a static presentation. The scroll-linked transforms are replaced with a simple static layout. The content is identical, the motion is removed.

GSAP doesn't have a global reduced-motion config like Motion. Interactive effects, magnetic buttons, hover animations, text splitting, need to check the preference individually.

We gate these effects behind a combined media query: (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference). This does three things at once. It ensures the effect only runs on devices with a precise pointer (no magnetic buttons on touchscreens). It ensures the device supports hover states. And it respects the reduced-motion preference.

Our testimonials carousel is a good example of the split. The full version uses GSAP SplitText to animate individual lines with staggered masks, text slides into view line by line. The reduced-motion version replaces this with a simple opacity fade. Same content, same carousel functionality, calmer presentation.

The key principle: reduced motion doesn't mean no animation. It means shorter durations, simpler transitions, and removing spatial movement. A fade is usually fine. A parallax scroll, a magnetic snap, or a line-by-line text reveal is not.