If animations or motion effects aren’t working as expected, your operating system may be set to reduce motion for accessibility reasons. When this setting is enabled, browsers report a preference for reduced motion, and many websites disable or simplify animations to respect that preference. If you would like animations to display normally, you can change the motion settings in your operating system using the steps below.

Disable “prefers-reduced-motion” on macOS

On macOS this preference is controlled by the Reduce Motion accessibility setting.

Steps

1. Click the Apple menu () in the top-left corner.

2. Open System Settings (or System Preferences on older versions).

3. Go to Accessibility.

4. Click Motion (or Display on older macOS versions).

5. Turn OFF “Reduce Motion.”

When Reduce Motion is off, macOS allows normal UI animations and browsers will report prefers-reduced-motion: no-preference.

Disable “prefers-reduced-motion” on Windows

Windows controls this via the system animation settings.

Windows 11

1. Open Settings (Win + I).

2. Go to Accessibility.

3. Click Visual effects.

4. Turn Animation effects ON.

Windows 10

1. Open Settings.

2. Go to Ease of Access → Display.

3. Turn Show animations in Windows ON.

If animations are disabled here, browsers typically expose prefers-reduced-motion: reduce; enabling them restores the normal animation preference