Reduced Motion

prefers-reduced-motion

Respect user preference for reduced motion.

CSS Media Query

/* Base animation */
.animated-element {
  transition: transform 0.3s ease;
  animation: slideIn 0.5s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
}

React Hook

// hooks/useReducedMotion.js
function useReducedMotion() {
  const [prefersReduced, setPrefersReduced] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReduced(mediaQuery.matches);

    const handler = (e) => setPrefersReduced(e.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return prefersReduced;
}

// Usage
function AnimatedComponent() {
  const prefersReduced = useReducedMotion();

  return (
    <div
      style={{
        transition: prefersReduced ? 'none' : 'transform 0.3s ease',
      }}
    >
      Content
    </div>
  );
}

Framer Motion Example

import { motion, useReducedMotion } from 'framer-motion';

function AnimatedBox() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
    >
      Animated content
    </motion.div>
  );
}

Implementing Reduced Motion

CSS Transitions

/* Before */
.button {
  transition: all 0.3s ease;
}

/* After */
.button {
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

CSS Animations

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slide-in {
  animation: slideIn 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animate-slide-in {
    animation: none;
    opacity: 1;
  }
}

JavaScript Animations

function useAnimation() {
  const prefersReduced = useReducedMotion();

  const animate = useCallback((element, keyframes, options) => {
    if (prefersReduced) return;
    
    element.animate(keyframes, {
      duration: 300,
      easing: 'ease-in-out',
      ...options,
    });
  }, [prefersReduced]);

  return animate;
}

Scroll Animations

/* Intersection Observer animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

Testing Reduced Motion

Chrome DevTools

1. Open DevTools (F12)
2. Open Rendering panel (⋮ → More tools → Rendering)
3. Enable "Emulate CSS media feature prefers-reduced-motion: reduce"

System Settings

macOS:

• System Preferences → Accessibility → Display → Reduce motion

Windows:

• Settings → Ease of Access → Display → Show animations

iOS:

• Settings → Accessibility → Motion → Reduce Motion

Android:

• Settings → Accessibility → Remove animations

Testing Checklist

• Animations disabled with reduced motion
• Essential animations still work
• No flashing or blinking
• Transitions instant
• Scroll effects disabled
• Auto-playing videos paused

Essential vs Decorative

// ✅ Essential animation (keep)
function Progress({ value }) {
  return (
    <div className="progress-bar">
      <div
        className="progress-fill"
        style={{ width: `${value}%`, transition: 'width 0.3s' }}
      />
    </div>
  );
}

// ❌ Decorative animation (remove)
function Header() {
  return (
    <div className="header animate-fade-in">
      <h1>Title</h1>
    </div>
  );
}