Designing Website Animation That Still Works When Motion Is Switched Off

We like motion on websites. A well-timed fade, a gentle scroll reveal or a transition between states makes a site feel considered. But some visitors have a system setting that asks for less movement, often because large animations make them feel dizzy or unwell. Respecting that setting is part of building the site properly, not a bonus feature.

The first step is to design the still version first. If every important piece of information only appears through an animation, the site fails for anyone who turns it off. We lay out each page so that all content is visible and readable with no movement at all, then add motion as an enhancement on top.

Reduced motion does not mean no motion. The CSS media query prefers-reduced-motion tells us what the visitor wants, and our usual response is to replace large movement with something gentle. A slide-in becomes a quick fade. A parallax background becomes static. A carousel that auto-advances stops advancing and waits for a click.

We separate harmful motion from helpful motion. Large scale changes, spinning, zooming and parallax are the main triggers. A small change in colour or opacity to confirm a button press is usually fine, and it can be genuinely useful feedback, so we keep those.

Autoplaying video and looping effects need an explicit pause control. Anything that moves for more than five seconds should be stoppable, and the control must be easy to reach with a keyboard.

Testing is simple and often skipped. Switch the setting on in your operating system, then walk through the whole site. Look for blank areas where content was meant to animate in, for buttons that depend on a transition to appear, and for layout jumps.

The reward is a site that is more robust everywhere. Pages that work without animation also load faster on weak connections and fail more gracefully, which is why we build this way across the sites on our demos page.