Animations using scroll triggers break when the browser window is resized or moved to another monitor. They either stop triggering, freeze, or misalign — especially in Chrome, Firefox, and mobile browsers.
This makes websites feel broken if a user simply rotates their device, changes screen size, or switches monitors. It’s a serious issue for live websites using scroll-based animations for engagement or storytelling.
Workarounds like ScrollTrigger.refresh() don’t solve it, and the issue resets only on full page reload. Safari behaves better, but that’s not a reliable fallback.
This bug breaks trust in scroll-trigger animations. It needs urgent attention to ensure consistent behaviour across all screen interactions.
Hello, idk if it helps,
But i had the same problem on my elementor website which use motion page, i tried to do sequence scrolling but when i resized it was fully broken.
So i tried to do it myself, and here is the code to do it, maybe you could adapt it for your problem.
Link to the code : https://sharetext.io/205484cf
Cheers