Elementor – Scrolling “motion-effects” not working until window resized

  • Resolved rordawgg

    (@rordawgg)


    5 years, 4 months ago

    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:

    -How to replicate: https://www.youtube.com/watch?v=U9vlteH691U
    -Example 1: https://www.youtube.com/watch?v=a9YGIkgRF_Q
    -Example 2: https://www.youtube.com/watch?v=JgSKObKfVOU

    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

    The page I need help with: [log in to see the link]

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

  • Hi,

    @rordawgg this generally happens if you are using margin/paddings in or out of the sections where you are using motion effect as that causes issues with the viewport calculation to trigger the effects. Can you check if changing such settings helps? Though this is definitely not convenient.

    Hi. Did you figure out how to solve this? I’m having the same issue

    Yes, was this ever resolved? I’m having the exact same issue. Eliminating the margins/paddings in and out of the section does not seem to help.

    I was able to fix this.
    Under EDIT SECTION, I changed the content width from stretch to boxed. That seemed to do the trick.

    This is not resolved. I have the same issue, change to boxed didn’t fix it. The scrolling effect is awful, what a waste of time.

    This issue is still happening. Any section that is not at the top of the page which has vertical scroll tied to the background image does not respond to scrolling until the window is resized. It basically makes the vertical scrolling feature worthless..

    • This reply was modified 4 years, 8 months ago by dfranz1.

    Any develeopment? This still occures. Effects fire only after things are out of sight and out of the viewport. Tried all the above. No change.

    Thread Starter rordawgg

    (@rordawgg)

    I was never able to resolve the issue from editing settings on Elementor. Instead, I used a .js animation library using attributes and classes.

    The .js animation library I used is https://alexfox.dev/lax.js/

    Good luck

    Are there any other solutions?? I still have the problem and I don’t use Elementor Pro so I cannot use attributes and classes..

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Elementor – Scrolling “motion-effects” not working until window resized’ is closed to new replies.

Tags