How to Make simple and accessible animations on Webflow?

Animations on websites can enhance user experience or undermine it entirely, depending on how they're implemented. For users with vestibular disorders — a condition affecting roughly 35% of adults over 40 — motion on screen can cause dizziness, nausea, or disorientation. The prefers-reduced-motion CSS media query exists specifically to address this.

What prefers-reduced-motion does: it's a system-level accessibility setting available on macOS, Windows, iOS, and Android. Users who need reduced motion can enable it in their OS accessibility settings. Websites that respect this media query automatically disable or simplify their animations for those users.

How to implement it in Webflow: Webflow doesn't support prefers-reduced-motion in the Designer natively. Add this to your Site Settings custom code (head section):

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

This disables all CSS animations and transitions for users who prefer reduced motion. Webflow Interactions (which run via JavaScript) aren't affected by this CSS rule — for those, check window.matchMedia('(prefers-reduced-motion: reduce)') in JavaScript and disable interaction triggers accordingly.

What to be careful about: don't disable all animation for everyone. Animation that serves a purpose — showing a form error, indicating loading, providing directional feedback — should still work for all users. The goal is to disable decorative animation (parallax effects, background animations, entrance animations) for users who need it, while keeping functional animation intact.

The most common triggers on Webflow sites: parallax scrolling effects, animated hero backgrounds, and auto-playing videos with motion. If your design uses any of these, ensure they either stop when the media query is active or include a user control to pause them.

Monthly test: enable Reduce Motion in your OS (macOS: System Settings → Accessibility → Display → Reduce Motion), then navigate your site. If it looks identical with the setting on and off, your implementation isn't working. Fix it before publishing.