Recipe 8.9

Respecting the User's Animation Preference

Some users with epilepsy or other vestibular disorders may be affected by animations. These users may configure their operating system to reduce animations. You can use the prefers-reduced-motion media query to determine if this preference is set, and adjust your animations accordingly.


if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  // Reduced motion is not enabled, animate normally
} else {
  // Skip this animation, or run a less intense one
Web API Cookbook
Joe Attardi