ARTICLE AD BOX
In Elementor 3.32 Pro, the builder now fully respects the user’s reduced-motion preference. This means that no Motion Effects are activated when reduced motion is enabled.
I manage a school website, and because of this change, all animations and effects are being disabled on school computers. It’s a bit ridiculous, and there doesn’t seem to be any way to toggle this behaviour on or off.
I understand the importance of accessibility, but in our case the school computers disable animations and motion effects for speed and efficiency, not for accessibility needs. As a result, the site looks flat and doesn’t function as intended.
Could we please have a toggle to enable or disable this feature? I’ve created a workaround, but it’s far from ideal. Is there another solution available?
A possible solution
(function() { // Check if reduced motion is actually enabled const hasReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // ONLY override if reduced motion is detected if (hasReducedMotion) { const originalMatchMedia = window.matchMedia; window.matchMedia = function(query) { if (query.includes('prefers-reduced-motion')) { return { matches: false, media: query, addEventListener: () => {}, removeEventListener: () => {}, addListener: () => {}, removeListener: () => {} }; } return originalMatchMedia(query); }; } function fixAnimations() { // Only fix if reduced motion was detected if (!hasReducedMotion) return; // Fix entrance animations document.querySelectorAll('.elementor-invisible').forEach(el => { el.classList.remove('elementor-invisible'); }); // Fix ALL your custom flip cards document.querySelectorAll('.timetable-card-3d, .contactinfo-card-3d, .termdates-card-3d').forEach(card => { card.style.transition = 'transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1)'; card.style.transformStyle = 'preserve-3d'; }); // Fix Max Mega Menu immediately document.querySelectorAll('.mega-menu, .mega-menu-wrap').forEach(menu => { menu.style.transition = 'opacity 0.3s ease, visibility 0.3s ease'; }); // Fix Essential Addons Hotspot tooltips document.querySelectorAll('.eael-hot-spot-tooptip, .eael-hot-spot-tooltip').forEach(tooltip => { tooltip.style.transition = 'opacity 0.3s ease, visibility 0.3s ease'; }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => setTimeout(fixAnimations, 50)); } else { setTimeout(fixAnimations, 50); } window.addEventListener('load', () => setTimeout(fixAnimations, 100)); })(); /* ONLY apply these fixes when reduced motion is detected */ @media (prefers-reduced-motion: reduce) { /* Force ALL animations */ * { animation-duration: inherit !important; animation-play-state: running !important; transition-duration: inherit !important; } /* Max Mega Menu - aggressive fix */ .mega-menu, .mega-menu *, .mega-menu-wrap, .mega-menu-wrap *, .mega-sub-menu { animation-duration: 0.3s !important; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important; } /* Entrance animations */ .elementor-invisible { opacity: 0 !important; visibility: visible !important; } [class*="elementor-animation-"] { animation-duration: 0.6s !important; } /* Share Buttons */ .elementor-share-buttons * { transition: all 0.3s ease !important; animation-duration: 0.6s !important; } /* Essential Addons Dynamic Gallery */ .eael-filter-gallery-wrapper, .eael-filter-gallery-wrapper *, .eael-filterable-gallery-item, .eael-gallery-grid-item, .eael-fg-item-wrap { transition: all 0.5s ease !important; animation-duration: 0.5s !important; } /* Essential Addons Image Hotspots - fix tooltips */ .eael-hot-spot-tooptip, .eael-hot-spot-tooltip, .eael-hot-spot-tooptip-text, .eael-tooltip, [class*="eael-hot-spot"] [class*="tooltip"] { transition: opacity 0.3s ease, visibility 0.3s ease !important; animation-duration: 0.3s !important; } /* Hide hotspot tooltips by default */ .eael-hot-spot-tooptip:not(:hover), .eael-hot-spot-tooltip:not(:hover) { opacity: 0 !important; visibility: hidden !important; } /* Show on hover */ .eael-hot-spot-tooptip:hover, .eael-hot-spot-tooltip:hover, .eael-hot-spot:hover .eael-hot-spot-tooptip, .eael-hot-spot:hover .eael-hot-spot-tooltip { opacity: 1 !important; visibility: visible !important; } /* Essential Addons Flip Box */ .eael-elements-flip-box-container, .eael-flip-box-container { perspective: 1000px !important; } .eael-elements-flip-box-flip-card, .eael-flip-box, .eael-flip-box-inner { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; } .eael-elements-flip-box-front-container, .eael-elements-flip-box-rear-container, .eael-flip-box-front, .eael-flip-box-back { backface-visibility: hidden !important; transform-style: preserve-3d !important; transition: transform 0.6s ease !important; } .eael-elements-flip-box-front-container { transform: rotateY(0deg) !important; } .eael-elements-flip-box-rear-container { transform: rotateY(180deg) !important; } .eael-elements-flip-box-container:hover .eael-elements-flip-box-flip-card { transform: rotateY(180deg) !important; } /* Custom flip cards */ .timetable-card-3d, .contactinfo-card-3d, .termdates-card-3d { transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important; transform-style: preserve-3d !important; } .timetable-card-face, .contactinfo-card-face, .termdates-card-face { backface-visibility: hidden !important; transform-style: preserve-3d !important; transition: transform 0.8s ease !important; } /* Elementor Flip Boxes (new) */ .e-flip-box { perspective: 1000px !important; } .e-flip-box__layer { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; } .e-flip-box__layer--front { transform: rotateY(0deg) !important; } .e-flip-box__layer--back { transform: rotateY(180deg) !important; } .e-flip-box:hover .e-flip-box__layer--front { transform: rotateY(-180deg) !important; } .e-flip-box:hover .e-flip-box__layer--back { transform: rotateY(0deg) !important; } /* Elementor Flip Boxes (old) */ .elementor-flip-box { perspective: 1000px !important; } .elementor-flip-box__front, .elementor-flip-box__back { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; } .elementor-flip-box__front { transform: rotateY(0deg) !important; } .elementor-flip-box__back { transform: rotateY(180deg) !important; } .elementor-flip-box:hover .elementor-flip-box__front { transform: rotateY(-180deg) !important; } .elementor-flip-box:hover .elementor-flip-box__back { transform: rotateY(0deg) !important; } }