Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Elementor – Scrolling "motion-effects" not working until window resized

I have scrolling effects on certain images, some enlarge, use horizontal, vertical scrolling, and a few other effects. The scrolling motion does not get initialized unless one of two things happen: 1) The browser window is resized (width or height). 2) You visit the page again or it’s refreshed. This is happening in all browsers.

Edit: Some of the scrolling effects seem to be initialized, but trigger before it’s in the viewport (Hence why you can’t see it).

Video of example:

NOTE: You must visit the page with an incognito page if you wish to replicate the issue multiple time. If it starts working again, try a new browser or a new tab.

Page URLs with affected scrolling (Most sections are under the “Web Design”):

https://rory-dwyer.com/hk-electrical-engineers/
-Section with Laptop, Phone and site screenshot

https://rory-dwyer.com/simpliii/
– In between Branding Elements and the Video

https://rory-dwyer.com/bridge-city-ballroom-dance/
– Phone entrance animation, site screenshots

https://rory-dwyer.com/jgarloff-design/
– Computer, phone and site screenshots

https://rory-dwyer.com/apo11o/
– Phones under Web Design

Things that I’ve tried:

  • Disabling all plugins
  • Using stock theme
  • Disabling header and footer script injection
  • Removing Elementor Nav and Footer sections
  • Search and replace http -> https
  • Rebuild the page from scratch (using a page template made in Elementor)
  • Rolling back Elementor version
  • Rebuilding the site from scratch on a live server (from start) rather than local env
  • Disabling all global templates
  • Removing all custom CSS and JS
Tags:

3

Answers


  1. 0

    For those who have this issue can try this.

    If you’re using Windows 10. probably you turned show animations on windows off.
    turn it on from settings display settings in Windows 10.

    Login or Signup to reply.
  2. 0

    Go to Jetpack settings in the Jetpack plugin. Go to the Performance tab. Scroll down the page and disable "lazy loading"

    Image of disabled "lazy loading" in the Jetpack plugin.

    Login or Signup to reply.
  3. 0

    Find your Elementor’s css file frontend.min.css and delete this part of css:

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

    This part of css tells browsers to disable animation if operating system prefers reduced motion, so deleting this part of css will force animation to show on all OSs. If you want to keep this part of css and want to show it on some PCs you want, then you can turn animation in settings on that PCs – to turn ON animation on Windows 10 go to Settings > Ease of Access > Display > Simplify and Personalise Windows then turn on Show Animations in Windows.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search