---
title: "Motion that delights without making anyone dizzy | Promovery"
description: "Reduced motion isn’t an afterthought. The patterns we use to keep animation inclusive – and still lovely."
canonical_url: "https://promovery.com/articles/accessible-motion"
meta:
  "og:description": "Reduced motion isn’t an afterthought. The patterns we use to keep animation inclusive – and still lovely."
  "og:image": "https://images.unsplash.com/photo-1545235617-9465d2a55698?w=1200&q=80"
  "og:title": "Motion that delights without making anyone dizzy | Promovery"
---

> Index of every page on this site: [llms.txt](https://promovery.com/llms.txt)

[All articles](https://promovery.com/articles)

[**Design**](https://promovery.com/articles?category=Design)September 15, 20262 min read

# **Motion that delights without making anyone dizzy**

Reduced motion isn’t an afterthought. The patterns we use to keep animation inclusive – and still lovely.

Good animation makes an interface feel alive. It shows where things come from, confirms that a tap worked and gives a brand some personality. Bad animation, for some people, is physically unpleasant.

For people with vestibular disorders, large or fast movement on a screen can cause dizziness, nausea and headaches that last for hours. Others find constant motion distracting, which makes it hard to read or concentrate. Designing motion responsibly isn’t about removing it – it’s about making it optional where it needs to be.

## **Respect the setting people already chose**

Every major operating system has a “reduce motion” setting, and browsers expose it to websites through the prefers-reduced-motion media query. When someone turns it on, they’re telling every site and app what they need. We treat it as a requirement, not a nice-to-have.

Reduced doesn’t have to mean none. In most cases, we replace big movements with gentle fades, which keep the sense of change without the movement that causes trouble.

> **Reduced motion means less movement, not less design.**

## **Patterns we use**

- Keep transitions short. Most interface animation should finish in 150 to 300 milliseconds.
- Prefer fades and small movements over large slides, zooms and spins.
- Avoid parallax and scroll-jacking for anything important. If you use them, switch them off when reduced motion is on.
- Never auto-play long animations or videos without a visible way to pause them.
- Never flash. Content that flashes more than three times a second can trigger seizures.
- Animate meaning, not decoration. If you can’t say what the motion tells the user, it’s probably noise.

## **What the guidelines say**

The Web Content Accessibility Guidelines (WCAG) cover motion in a few places. Moving or auto-updating content that lasts more than five seconds needs a way to pause, stop or hide it. Content must not flash more than three times in any one second. And at the highest level of the guidelines, animation triggered by interaction should be possible to switch off.

Meeting these isn’t only about compliance. It’s the baseline for a site that everyone can use comfortably.

## **Test it yourself**

The easiest step is also the most revealing: turn on reduced motion on your own phone and laptop for a day, then use your website. You’ll quickly see which animations still play, which pages feel broken without them and which ones you don’t miss at all.

That last group is worth noticing. More often than not, the animations nobody misses can simply go – and the site feels faster for everyone.

## **Keep reading**

[All articles](https://promovery.com/articles)

- [

  Oct 20, 20262 min read<h3>What a design system really costs – and when it pays you back</h3>

  Year one always costs more than the spreadsheet says. Year three is where it earns its keep. Here’s how we budget design systems honestly.](https://promovery.com/articles/design-system-cost)
- [

  Oct 24, 20262 min read<h3>Core Web Vitals in 2026: what still moves the needle</h3>

  INP has replaced FID and the bar keeps rising. A practical checklist from the launches we’ve shipped this year.](https://promovery.com/articles/core-web-vitals-2026)
- [

  Oct 12, 20262 min read<h3>Five signs it’s time for a brand refresh</h3>

  Not every dip in sales needs a new logo. These are the signs that your brand really is holding you back.](https://promovery.com/articles/brand-refresh-signals)

**Like how we think?**

## **From the journal to ***your*** brief.**

Everything we write about, we also do for clients. Send us a challenge – the person who wrote the article may well be the one who answers.

[Build a campaign](https://promovery.com/campaign-builder)

**Or write to us**

[**info@promovery.com**](mailto:info@promovery.com)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://promovery.com/#website","@type":"WebSite","name":"Promovery","url":"https://promovery.com/","publisher":{"@id":"https://promovery.com/#identity"}},{"@id":"https://promovery.com/articles/accessible-motion#webpage","@type":"WebPage","description":"Reduced motion isn’t an afterthought. The patterns we use to keep animation inclusive – and still lovely.","name":"Motion that delights without making anyone dizzy","url":"https://promovery.com/articles/accessible-motion","isPartOf":{"@id":"https://promovery.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://promovery.com/articles/accessible-motion"]}],"primaryImageOfPage":{"@id":"https://promovery.com/#logo"}},{"@id":"https://promovery.com/#identity","@type":"Organization","name":"Promovery","url":"https://promovery.com","logo":{"@id":"https://promovery.com/#logo"}},{"@id":"https://promovery.com/#logo","@type":"ImageObject","caption":"Promovery","contentUrl":"https://promovery.com/apple-touch-icon.png","inLanguage":"en","url":"https://promovery.com/apple-touch-icon.png"}]}
```

## Sitemap

See the full [sitemap](https://promovery.com/sitemap.md) for all pages.