Reduced Motion Support

1 min read Updated

Some people turn on a reduced motion setting on their device, because movement on screen can cause dizziness, nausea or headaches. Block Animations respects this setting. The browser tells the site about the setting with the prefers-reduced-motion media feature.

What Visitors See

When reduced motion is on, each animation finishes in 1 millisecond. The element shows in its final state at once, with no visible movement.

  • The timing stays the same. An element with Hide Before Animation stays hidden until its event, for example until it scrolls into view. Animation Delay still applies.
  • Repeat Animation doesn’t loop. The animation plays once.
  • Animation Final State still applies. A Hidden or Removed element still disappears at the end.

The animations of the Premium Hero and Blog addons use the same styles, so they work the same way.

Check the Setting in Your Browser

If animations don’t play on a device, first check if reduced motion is on.

  1. Open your site in the browser.
  2. Open the browser’s developer tools and select the Console tab.
  3. Paste this line and press Enter:
window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches

true means reduced motion is on. false means animations can play.

Turn Reduced Motion On or Off

The setting is part of the operating system, not the website. Reload the page after you change it.

macOS
Go to System Settings > Accessibility > Display and turn Reduce motion on or off.

Windows 11
Go to Settings > Accessibility > Visual effects. Turn Animation effects off to reduce motion, or on to allow animations.

iPhone and iPad
Go to Settings > Accessibility > Motion and turn Reduce Motion on or off.

Android
Go to Settings > Accessibility and find Remove animations. The name and place change between devices.