How Do I Respect prefers-reduced-motion in Webflow Animations in 2026?

Have you ever felt dizzy on a site that would not stop moving?

I have, and so have plenty of the people who visit the sites I build. Big parallax jumps, spinning icons, and sliding panels look fun to some and make others feel sick. The web has a built in fix for this called prefers-reduced-motion. In this guide I will show you how to respect it in Webflow, step by step, in plain terms.

What is prefers-reduced-motion and who turns it on?

Prefers-reduced-motion is a CSS media query that tells your site a visitor wants less movement. People turn it on in their device settings, often because motion makes them dizzy or distracted. The query has two states, no-preference and reduce. When it reads reduce, your job is to calm the animations down.

This is not a rare setting. People with vestibular issues, migraine triggers, or focus needs use it every day. Some just prefer a quiet screen. The point is that the person told their device what they want, and a good site listens.

Why should I respect this setting on my Webflow site?

Because it makes your site usable for more people and shows you care about the details. Motion that feels smooth to you can trigger nausea or headaches for someone else. When you honor the setting, you keep those visitors on the page instead of driving them away. It is a small change with a real human payoff.

There is a business case too. Founders judge a site by how it feels. A site that respects a visitor's own settings feels considered and professional. It is the same instinct behind good accessible focus states, where small choices signal real care.

Does this connect to accessibility rules like WCAG?

Yes. The Web Content Accessibility Guidelines from the W3C include Success Criterion 2.3.3, called Animation from Interactions. It asks that motion triggered by a user action can be turned off, unless the motion is essential. That criterion sits at Level AAA, the highest tier, so it is a strong goal rather than a bare minimum.

Even though 2.3.3 is Level AAA, honoring prefers-reduced-motion is one of the cleanest ways to meet its intent. The W3C even documents a technique, known as C39, for using the media query to prevent motion. So you are following an approach the standards body itself recommends.

How do I find the reduced-motion setting on my own device?

You can flip it on to test your work. On macOS, open System Settings, then Accessibility, then Display, and turn on Reduce Motion. On iOS it sits under Accessibility and Motion. On Windows, look under Settings, Accessibility, and Visual Effects for Animation Effects. Chrome, Safari, and Firefox all read this system setting.

Once it is on, reload your site. Any animation you have not guarded will still play, which is exactly how you spot the ones that need work. I keep this setting handy while I build, so I never ship motion I have not checked.

How do I add a reduced-motion rule to Webflow with custom code?

Add a small CSS block in your site or page custom code that softens motion when reduce is set. Open Webflow project settings, find the custom code area, and add a style block inside the head. A simple version turns off animations and smooth scrolling for anyone who asked for less motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

This rule does not delete your design. It just shrinks animation and transition time to almost nothing, so movement stops feeling like movement. Because it lives in the head, it applies across the whole site. You write it once and it protects every page.

How do I handle Webflow Interactions and GSAP with reduced motion?

The CSS block above catches most CSS transitions, but Webflow Interactions and GSAP run on JavaScript, so they need a second look. Webflow's native Interactions, still often called IX2, do not always read the media query on their own. For heavy scroll effects, you may need a small script that checks the setting before it runs the animation.

GSAP, which Webflow made free to use, lets you check the setting in code with a media query match, then skip or simplify the timeline. If you are leaning on GSAP more since the change, my piece on Webflow making GSAP free gives the wider background. The rule stays the same. If reduce is on, play it calm or not at all.

What should I do instead of removing motion entirely?

Replace big movement with small, gentle change. A slide can become a soft fade. A bouncing icon can simply appear. A long parallax can hold still. The reader still gets a sense of polish without the part that causes trouble. Essential motion, like a loading spinner that shows progress, can stay, since it carries meaning.

I think about this whenever I weigh a flashy effect. If you are still unsure whether a heavy effect earns its place, my take on parallax scrolling in 2026 walks through the trade off. Reduced motion is not about a boring site. It is about a site that adjusts to the person using it.

How do I test that my reduced-motion setup works?

Turn the setting on, then click through every page and interaction. Watch for anything that still slides, spins, or bounces. Check the hero, the nav, any sliders, and your scroll effects. Test on both a phone and a laptop, since motion often behaves differently on each. If something still moves a lot, guard it and test again.

Should I also add my own motion toggle on the site?

For most sites, the system setting is enough, but a visible toggle can help in some cases. Not everyone knows how to change their device settings, and some people only want to calm one specific site. A small control that lets a visitor turn motion off, right there on the page, gives them power without a trip into their operating system.

I add a toggle mainly on sites with heavy animation, like a portfolio or a launch page. On a simple business site, the prefers-reduced-motion rule usually covers what people need. If you do add a toggle, save the choice so it sticks on the next visit, and make sure it actually stops the animations rather than just hiding a banner. The toggle is a nice extra, not a replacement for honoring the system setting, which should always come first.

Is this worth the effort for a small site?

Yes, because the core fix is a single CSS block you can reuse on every project. The base version takes a few minutes and covers most animations at once. The only real work is checking your JavaScript driven effects, and even that is quick on a small site. For that little effort, you make your work kinder and more professional.

If you want, I am happy to look at your Webflow site and point out which animations need a reduced-motion guard and which are already safe. Reach out and we can run through it together.