accessible-animation

Write motion as the default, then override it inside a @media (prefers-reduced-motion: reduce) block. Use a global safety net with 0.01ms durations and animation-iteration-count: 1, then layer targeted overrides that remove transforms while keeping opacity and color transitions.

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.

No, removing all animation is an over-correction that causes teleporting elements and loses affordances like focus rings and loading spinners. Classify motion into tiers: remove parallax and large movement, soften small entrances into fades, and keep opacity and color transitions.

Yes, wrap your app in MotionConfig with reducedMotion="user" so child motion components automatically drop transform and layout animations while keeping opacity. For per-component control, use Framer's useReducedMotion hook to swap variant definitions.

Setting animation-duration or transition-duration to 0s prevents animationend and transitionend events from firing, breaking JS that waits on them. Use 0.01ms instead so the events still fire while motion appears instant.

Do not instantiate Lenis at all when matchMedia('(prefers-reduced-motion: reduce)').matches is true, since smooth-scroll hijacking is a Tier 1 vestibular trigger. Add a change listener to destroy or recreate the instance when the OS setting toggles.