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