# Reduced Motion on Storefronts: Respecting prefers-reduced-motion

Source: https://storefronta11y.com/blog/2026-10-26-reduced-motion-storefront-animations.html

Reviewed October 26, 2026


Parallax heroes, zoom effects, and auto playing motion can cause real discomfort for shoppers with vestibular disorders. How the prefers-reduced-motion setting works and what to change.

## Motion is an accessibility issue, not a taste issue

For people with vestibular disorders, certain screen motion can trigger dizziness, nausea, headaches, and disorientation that outlast the browsing session. Parallax scrolling, where background and foreground move at different speeds, large scale zooming, and elements that slide in from off screen are common triggers. This is not a preference for calmer design. It is the same category of barrier as a missing label, expressed through the body instead of a screen reader.

Operating systems and browsers expose a setting, prefers-reduced-motion, that users enable once at the device level. Websites can read it with a simple media query. A store that honors it is not guessing who needs help: shoppers have already told their device, and the device tells the site. Ignoring the signal is a choice, and auditors increasingly treat it as one.

## What to tone down when the setting is on

Start with the biggest movements. Disable parallax effects so backgrounds scroll normally, stop auto playing carousels and hero videos or show a static frame with a play control, and replace slide and zoom entrance animations with simple fades or instant appearance. Product image zoom on hover should not animate dramatically for reduced motion users: show the zoomed state without the sweeping transition.

Page transitions, animated counters, marquee banners, and sticky elements that shift as you scroll all belong on the review list. The rule of thumb: content may still change, but it should not travel. Fades at short duration are generally tolerated far better than movement across the screen, and removing motion should never remove information. Every animated explanation needs a static state that says the same thing.

## Implementation without a rebuild

Most storefronts can cover the worst offenders with a compact block of CSS inside the reduced motion media query: kill animations and transitions broadly, disable smooth scrolling, and turn off parallax backgrounds. That single step handles theme level motion. App driven effects, like animated popups, spin to win wheels, and video backgrounds injected by marketing tools, need individual checking, because third party scripts do not automatically respect your stylesheet.

Test it the way users experience it: turn on reduce motion in your own operating system settings, then browse your store end to end, including the apps, popups, and checkout extensions. Motion you never noticed becomes obvious once you are looking for it, and the fix list writes itself. Document the check in your release process so the next theme update does not quietly restore the problem.

## Motion that remains, done well

Honoring reduced motion does not mean the default experience must become static. Stores can keep considered animation for everyone else while giving reduced motion users a calm, complete equivalent. What matters is that the choice belongs to the shopper and travels with their device settings, not with a toggle buried on one page of your site.

This is also a design discipline win. Teams forced to identify which motion actually communicates, a drawer opening, a filter applying, tend to cut the decorative motion that was slowing pages and distracting from products anyway. Accessibility work that makes the store faster and clearer for everyone is the easiest kind to defend in a budget meeting.

## Related reading

If this topic is useful, these earlier guides go deeper on connected questions: [Touch Target Sizes on Mobile Storefronts: Small Buttons Lose Sales](https://storefronta11y.com/blog/2026-10-25-touch-target-sizes-mobile-storefront.md), [Accessible Size and Color Selectors: Where Shoppers Get Stuck](https://storefronta11y.com/blog/2026-10-25-accessible-size-color-selectors-storefront.md), and [Visible Focus Indicators: The Outline Keyboard Shoppers Navigate By](https://storefronta11y.com/blog/2026-10-24-visible-focus-indicators-storefront.md).

## Frequently asked questions

### What is prefers-reduced-motion?

It is a device and browser setting that users enable to request less animation, exposed to websites as a CSS media query. It is commonly set by people with vestibular disorders, migraines, or motion sensitivity, and honoring it means your site reduces or removes non essential movement for those visitors.

### Does WCAG require respecting reduced motion?

WCAG includes criteria on animation from interactions and motion actuation, and respecting the platform reduced motion setting is the recognized way to satisfy user needs in this area. Audits increasingly flag parallax and auto playing motion that ignores the setting, especially on high traffic pages.

### Which animations are most likely to cause problems?

Parallax scrolling, large elements moving across the screen, zooming that simulates moving toward or away, and auto playing motion the user cannot stop. Small, user initiated transitions and brief fades are far less likely to trigger symptoms.

### Will reducing motion hurt my brand feel?

Only for visitors who explicitly asked for reduced motion, and for them the calmer experience is the brand working correctly. Everyone else still sees the full animated design. A static, clear equivalent also tends to load faster, which helps the same pages perform better.