How to disable Webflow animations for users who prefer reduced motion
Tags: a11y, webflow, tutorial
Published: 2022-08-19 19:10:11

Webflow animations and interactions can really make a site shine.

However, some of your visitors might be dizzied by all of the fading, twisting, shifting and scaling that Webflow allows you to create. Others might just prefer websites to be more static and information-focused.

These users often have the "[Reduce motion](https://university.webflow.com/lesson/check-system-motion-settings)" setting turned on on their computer.

Respecting this user preference is important to improve your site's accessibility, especially for animation-heavy sites.

In this article, we'll show you how you can disable your Webflow animations and interactions when [_prefers-reduced-motion_](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) is turned on.

‍

## The code

Let's skip straight to the part you're most likely interested in: the code!

Here is the short script that you can add to your site's footer via the [Site settings > Custom code tab](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#custom-code-in-site-settings) in Webflow:

```html
<script>
    // Cancel Webflow animations for users who prefer reduced motion
    if (window.matchMedia("(prefers-reduced-motion)").matches) {
        const cancelAnimationsInterval = setInterval(function () {
            if (typeof Webflow == "undefined" || typeof Webflow.require == "undefined") {
                return;
            }
    
            clearInterval(cancelAnimationsInterval);
    
            // Stop Webflow's handling of animations
            Webflow.require("ix2").destroy();
    
            // Reset the inline styles for every element that has already been initialized
            const animatedElementsSelector = "[style*='will-change'], [style*='opacity: 0']";
            for (const animatedEl of document.querySelectorAll(animatedElementsSelector)) {
                animatedEl.style = "";
            }
        }, 10);
    }
</script>
```

You should place this script at the very top of your footer's custom code. Otherwise, slow or heavy scripts that precede it might prevent it from stopping the animations early enough, which could result in a weird flash of animated content for visitors with reduced motion turned on.

‍

## How it works

When you add this script in your site's footer, it appears before the closing `</body>` tag.

At that point, Webflow's interactions script should already have been loaded and initialized, but not enough time has passed for the browser to render the animated element's starting styles.

The script first checks if the user prefers reduced motions. If they do, it will:

1.  Wait until Webflow's script has loaded.
2.  Tell Webflow to stop processing and handling interactions and animations.
3.  Remove inline styles on elements that Webflow already started animating.

In practice, all of this happens within a few milliseconds.

From the visitor's point of view, your site will simply appear as though it does not have any animations when loading the page or scrolling.

For visitors who don't have the "prefers reduced motion" setting turned on, the script doesn't do anything: your site will appear as you designed it, animations and all!

‍

## Before & After

Here's a preview of Koalati's website, which is using this script, with and without the _prefers-reduced-motion_ setting turned on.

‍

![The page loads and only the top navigation is visible. Then, the heading slowly fades in, followed by a video thumbnail. As the user scrolls, the text and images of each section appears with transitions such as fade-in, scale-in, etc.](https://uploads-ssl.webflow.com/614a41fb8e483ac2011e7688/62ffbd1a4d13cfd9f4155545_preview-with-animations.webp)
With prefers-reduced-motion turned OFF.

‍

![The page loads with all the text and images visible right away. As the user scrolls, there are no fading, scaling or moving animations: the text and images are visible right away and stay static.](https://uploads-ssl.webflow.com/614a41fb8e483ac2011e7688/62ffbd449267bdb3b26c628c_preview-without-animations.webp)

With prefers-reduced-motion turned ON.

‍

## A few things to keep in mind

### Hover, focus and active effects aren't affected. 

This script only disables the animations generated via Webflow's Interactions tab.

Your hover, focus, focus-visible and active styles are not affected by this script, and will therefore remain unchanged.

This is by design, as hover, focus and active states are important for your site's accessibility.

‍

### Animations generated by custom code aren't affected. 

If you use custom code (Javascript and/or CSS) to create animations and interactions, these won't be disabled by this script.

Only animations and interactions generated via Webflow's interactions tab are disabled by this script.

‍

### All inline styles are removed from animated elements.

This script will automatically remove all inline styles from the elements that are usually animated (when visitors have prefers-reduced-motion turned on).

For most Webflow sites, this won't be an issue.

However, if you intentionally add inline styles on some elements that also have Webflow interactions, you should make sure that these elements aren't broken when this script is introduced.

If they are, you can try to update the `animatedElementsSelector` to ignore those elements.

If that doesn't work, you'll likely need to adapt the code to match your needs.

‍

### If you use Webflow Interactions for important components (ex.: menu burger button), this script is not adequate for you.

Seeing as the script disables all Webflow interactions, you'll want to implement your own solution if you use Interactions for important components such as a menu toggle button.

However, you should be aware that using Webflow interactions for important interactive components is generally not great for accessibility to begin with, unless you manually add custom code to handle the accessibility side of it.


## Summary

Disabling Webflow interactions and animations for users who prefer reduced motion is an easy way to improve your site's accessibility, especially if you use a lot of animations.

Luckily, for most sites, it can be done in just a few minutes thanks to the short code snippet we provide in this article.