Elementor Animations are Not Working

(@sgumby)

I have this css in elementor’s front end that seems to be defaulting to my OS’s settings. This NEEDS TO BE SOMETHING I AS THE SITE OWNER CONTROLS! NOT ELEMENTOR!!! How do we remove this?

@media (prefers-reduced-motion:reduce) {
    .animated {
        animation: none!important
    }

    html * {
        transition-delay: 0s!important;
        transition-duration: 0s!important
    }
}

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

sgumby

(@sgumby)

1 day, 16 hours ago

For anyone else running in to this….these seem to fix it….at least in my instance.

In Elementor > Custom Code…

<script>
// Spoof matchMedia before Elementor evaluates the user's OS motion settings
(function() {
    var nativeMatchMedia = window.matchMedia;
    window.matchMedia = function(query) {
        if (query.indexOf('prefers-reduced-motion') !== -1) {
            return {
                matches: false, // Force "reduce" to evaluate as false
                media: query,
                onchange: null,
                addListener: function() {},
                removeListener: function() {},
                addEventListener: function() {},
                removeEventListener: function() {}
            };
        }
        return nativeMatchMedia.call(window, query);
    };
})();
</script>

Then in your theme’s css…

@media (prefers-reduced-motion: reduce) {
    /* 1. Restore standard transition behaviors for layout engines */
    html *, 
    body *,
    *:before,
    *:after {
        transition-delay: unset !important;
        transition-duration: unset !important;
        transition: unset !important;
    }

    /* 2. Target Elementor Swiper sliders specifically to force slide movements */
    .swiper-wrapper,
    .swiper-slide,
    .elementor-slides,
    .elementor-main-swiper {
        transition: transform 0.5s ease !important; /* Forces the slide motion back on */
        animation: unset !important;
    }

    /* 3. Restore native Elementor entry/scrolling animations */
    .animated,
    .elementor-invisible,
    [class*="elementor-motion-effects"] {
        animation-duration: var(--widgets-media-query-duration, 1s) !important;
        animation-fill-mode: both !important;
    }
    
    /* Ensure invisible waiting layers are visible */
    .elementor-invisible {
        visibility: visible !important;
    }
}

Plugin Support

Milos

(@miloss84)

1 day, 10 hours ago

Hi there,

I completely understand your frustration regarding controlling your site’s styles!

Just to give you a quick technical overview: this specific block @media (prefers-reduced-motion: reduce) is a modern web accessibility standard. It’s designed to automatically disable animations for visitors who have “Reduce Motion” enabled in their operating system settings (often used by people sensitive to motion/animations).

If animations aren’t showing up for you while editing or viewing the site, it’s almost certainly because this feature is currently active on your computer or phone. How to turn it off on your OS:

Mac: Go to System Settings > Accessibility > Display > turn off Reduce motion.
Windows 10/11: Go to Settings > Accessibility > Visual effects > turn off Animation effects (or search for “Show animations in Windows”).
iOS / Android: Look under Accessibility Set Reduce Motion or Remove animations to off.

Looking forward to your response so we can get this sorted out!

Thread Starter

sgumby

(@sgumby)

1 day, 1 hour ago

But it was your choice to follow this setting. The website owner should make this choice….NOT YOU.

Where this hits the pavement is if I have a client that wants a slider and its not working like a slider do I tell them and all of their site visitors to change their computer settings? No…..I can’t do that. I have to make this work like a slider.

You have tons of settings in Editor > Settings. All I’m suggesting is you let us make the decision about this and add this as a setting.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.