Elementor 3.33.x – CSS 3D Animations Not Working on Desktop

  • Linksbreaker

    (@linksbreaker)


    1 week, 3 days ago

    Issue Description:
    Starting with Elementor 3.33.x (including Pro 3.33.x), all CSS 3D-based animations stop working properly on desktop browsers.
    This affects:

    • Motion Effects → Entrance Animations
    • Motion Effects → Mouse Effects → 3D Tilt
    • 3D Flipbox
    • Any 3D animations from third-party addons (Element Pack, Essential Addons, etc.)

    Everything works perfectly on mobile, and the same HTML/CSS exported outside WordPress works flawlessly.

    Versions affected:

    • Elementor 3.33.0 → 3.33.2 (confirmed)
    • Elementor Pro 3.33.0 → 3.33.1 (confirmed)

    Versions NOT affected:

    • Elementor 3.29.2
    • Elementor Pro 3.29.0

    Steps to reproduce:

    1. Create any widget using 3D transforms (Flipbox, or any element with Entrance Animation + 3D transform).
    2. Enable any 3D animation in Motion Effects.
    3. View the page in Chrome or Firefox on Desktop.
    4. Animations do not work or behave erratically.

    Expected result:
    CSS 3D animations should behave as in previous versions and as they currently work on mobile devices.

    Actual result:
    On Desktop, 3D transforms fail to render properly, do not trigger, or animate incorrectly.

    Additional notes:

    • Tested with all plugins disabled except Elementor + Elementor Pro.
    • Tested using default themes (Twenty Twenty-Five).
    • Reinstalled all core WordPress files.
    • Tested on multiple browsers and machines.
    • The same 3D HTML/CSS works perfectly outside WordPress → this is not a hardware GPU issue.

    Everything points to a regression or unintended side-effect introduced in the recent Motion Effects updates in Elementor 3.33.x.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Linksbreaker

    (@linksbreaker)

    1 week, 3 days ago

    It is suspected that the issue may be related to recent changes introduced in Elementor 3.33.x, specifically affecting how the editor handles 3D transform contexts on Desktop. A modification in the wrapper structure, perspective handling, or Motion Effects engine may be unintentionally flattening or overriding the 3D transform environment, causing all CSS 3D animations to fail on Desktop while still working correctly on mobile.

    Plugin Support Rica

    (@ricav)

    4 days, 14 hours ago

    Hi @linksbreaker,

    This behavior may be caused by the Reduce Motion setting being enabled on your device. “Prefer Reduce Motion” is an accessibility feature available on most operating systems and browsers. When it’s turned on, it signals websites and applications to minimize or disable non-essential animations and motion effects.

    Starting with Editor versions 3.32 and 3.33, Elementor automatically disables Entrance Animations, Motion Effects, and Transitions when a user’s device has Reduce Motion enabled.

    Please try disabling Reduce Motion on your device to see if this resolves the issue.

    If you need further assistance, I’ll be more than happy to help.

    Best regards,

    Thread Starter Linksbreaker

    (@linksbreaker)

    3 days, 5 hours ago

    Hi @ricav

    Thanks for your answer. I checked the “Reduce Motion” settings on my system, and here’s how other users on Windows can verify this as well:How to Enable Motion Effects on Windows 10 / 11

    1. Open Settings (WIN + I).
    2. Go to Accessibility.
    3. Select Display (or Visual Effects on Windows 11).
    4. Look for:
      • Animation effects (Windows 11)
      • Show animations in Windows (Windows 10)
    5. Make sure this option is enabled.

    If animations are turned off at the OS level, Windows reports prefers-reduced-motion: reduce, and Elementor automatically disables 3D animations and Motion Effects, which explains the behavior.

    ❓ Question

    Is there any way for Elementor to detect when a user has “Reduce Motion” enabled and display a non-intrusive alert or notice on the frontend, letting them know that enabling system animations would provide a better visual experience?

    Something like:

    “Your device is currently set to reduce motion. For full visual effects, enable animations in your system settings.”

    This would help prevent confusion, especially since the issue only affects Desktop users and all animations still work normally on mobile.

    Let me know if this is feasible or recommended.

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

You must be logged in to reply to this topic.