Motion Accessibility and Performance Triage

Large Theory

Motion is not decorative polish added at the end. It helps users understand state, space, and feedback, but it can also cause dizziness, steal attention, create performance jank, disrupt focus, and leak lifecycle listeners. Motion governance puts every animation into an inventory: purpose, trigger, duration, properties, library, reduced-motion branch, user control, and verification evidence.

Small Points

1. Classify motion first: orientation, state feedback, causal transition, progress, delight, or decorative loop. Decorative loops are the first candidates to reduce.
2. Trigger changes risk: load/auto-play is riskier than hover/tap, and scroll/scrub needs stronger performance and skip paths than ordinary transitions.
3. Reduced motion is not only duration 0; large movement can become opacity/crossfade, parallax can become a static poster, and autoplay video can stop autoplaying.
4. WCAG 2.3.3 covers disable paths for non-essential animation triggered by user interaction; 2.2.2 covers pause/stop/hide for auto-starting moving, blinking, or scrolling content that lasts more than five seconds alongside other content.
5. Prefer transform, opacity, clip-path, and CSS variables; avoid sustained width, height, top, left, filter blur, and heavy box-shadow animation.
6. Library governance includes cleanup: Motion checks stable keys and AnimatePresence boundaries, GSAP checks context/revert, and Lenis/ScrollTrigger checks instance destruction and refresh.

Design Judgment

Motion is healthy when users still understand state changes without it, and enabling it clarifies spatial relationship, feedback, or brand rhythm. It is risky when users must wait for it, cannot pause a loop, still get large motion under reduced-motion, or the page simply feels busy.

Implementation Notes

Create a motion triage record: selector/component, purpose, trigger, duration/easing, animated properties, library, essential/non-essential, reduced-motion behavior, pause/stop/hide control, performance risk, cleanup path, and desktop/mobile evidence. In React use useReducedMotion or MotionConfig. In GSAP use gsap.matchMedia(). In CSS use @media (prefers-reduced-motion: reduce). For Lottie, video, and looping backgrounds provide static alternatives.

Counterexamples/Risks

All cards flying in at once, looping particle backgrounds in admin tools, loading state expressed only by Lottie with no text status, scroll scrub controlling core explanation with no skip path, pointermove calling setState every frame, and ScrollTrigger/Lenis listeners surviving component unmount.

Case Study

Motion's useReducedMotion documentation suggests replacing potentially uncomfortable x/y movement with opacity, disabling background video autoplay, or turning off parallax. GSAP's accessibility guide uses gsap.matchMedia() to separate no-preference and reduce branches, and warns that large x/y movement can trigger vestibular discomfort. WCAG separates interaction-triggered animation from auto-starting moving content with pause/stop/hide requirements. The reusable lesson is that accessible motion is not no animation; it is a lower-risk expression of the same state change.

Source Links

Motion useReducedMotion: https://motion.dev/docs/react-use-reduced-motion GSAP Accessible Animation: https://gsap.com/resources/a11y/ WCAG Animation from Interactions: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html MDN prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion