CODEWITHSUNDEEP
javascripthtmlcsswordpresselementor
Rory Dwyer
Rory Dwyer

Reputation: 11

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:

Upvotes: 1

Views: 4758

Answers (4)

Philips E.
Philips E.

Reputation: 1

The problem is with media queries. Check the "Sticky on" option, if you only have "Desktop & Tablet" then it may not work for Tablet Extra, Laptop, and Mobile Extra. So if you have activated the experiment to enable extra responsive screens, then that's why you are having this issue.

Upvotes: 0

omanosoft
omanosoft

Reputation: 4339

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.

Upvotes: 0

thatsmybrodie
thatsmybrodie

Reputation: 11

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.

Upvotes: 1

xkdhc
xkdhc

Reputation: 1

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.

Upvotes: 0

Related Questions