Reduced Motion (Webflow-Specific JS)

reducedMotion.js

// 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);

        // Get the interactions data from Webflow's state
        const interactionsData = Webflow.require('ix2').store.getState().ixData;
        // Filter out all non-click events from the interactions
        interactionsData.events = Object.fromEntries(
            Object.entries(interactionsData.events).filter(eventEntry => {
                return /^MOUSE_.*CLICK$/.test(eventEntry[1].eventTypeId);
            })
        );
        // Put the data in the format that Webflow expects it
        interactionsData.site = {
            mediaQueries: interactionsData.mediaQueries
        };

        // 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 = "";
        }

        // Re-initialize Webflow interactions for click-related events only
        Webflow.require('ix2').init(interactionsData);
    }, 10);
}

MINIFIED & COMPRESSED (reducedMotion.min.js)

if(window.matchMedia("(prefers-reduced-motion)").matches){const a=setInterval(function(){if("undefined"!=typeof Webflow&&"undefined"!=typeof Webflow.require){clearInterval(a);const b=Webflow.require("ix2").store.getState().ixData;b.events=Object.fromEntries(Object.entries(b.events).filter(a=>/^MOUSE_.*CLICK$/.test(a[1].eventTypeId))),b.site={mediaQueries:b.mediaQueries},Webflow.require("ix2").destroy();for(const a of document.querySelectorAll("[style*='will-change'], [style*='opacity: 0']"))a.style="";Webflow.require("ix2").init(b)}},10)}