UPDATE - SOLVED!
Many of my sections have elements that animate in and out from outside of their respective sections, in other words they overflow. Putting overflow:hidden; on all those sections solved my original issue and I will simply work around that which shouldn’t be too difficult.
ORIGINAL POST:
In short - it’s like the zone where the browser is checking if an element is actually scrolling through the viewport is shifted to just above and just below of the actual viewport.
Current build of site to dig around if you’d like: Webflow - Waypoint
Video of issue (emulated mobile Chrome, but the behaviour is exactly the same on an actual Android phone): android-chrome-emulated.mp4 - Google Drive
Disregard the broken layout on mobile breakpoints, the only thing to note is that the animations that you do see should be happening continuously while scrolling.
Each animation is a Lottie element triggered to run tied to “while scrolling in view”.
Different breakpoints have different animations and their own “while scrolling in view” triggers set to run or not run on certain breakpoints.
It happens on mobile Chrome or desktop Chrome where it’s set to emulate a mobile device.
iPhones and desktop Chromes have no issues at all.
The weird thing is that I’ve built sites on Webflow utilising the same idea and they work without a hitch, so this is an issue to do with only this, arguably complicated, site.
Does anybody have any ideas what might be causing these issues?
Here is my public share link: LINK
(how to access public share link)