Parallax Desync Bug

[astronaut954]

For some reason, my parallax scroll is getting a strange bug that will make all the scroll elements mess up (blank spaces, not finishing the animation, overlapping and so on) in 2 scenarios:

- Changing the page size and not reloading the page;

- Quickly scrolling (as far as I was able to investigate it will happen when the content is still loading, but I'm not completely sure about this information);

The first scenario isn't a big deal (but if it isn't that hard I would like to fix it) since you don't expect the user to do it. Yet the second scenario is something I need to fix because it directly affects the user experience. Any idea about what is happening and the alternatives?

See the Pen azdqgpX by Ramoses-Hofmeister-Ferreira (@Ramoses-Hofmeister-Ferreira) on CodePen.

[GreenSock]

I see two problems: 

1. You've got scroll-behavior: smooth (that's like applying a CSS transition to something animated with GSAP - the browser basically refuses to set values immediately, so when GSAP recalculates positions and temporarily sets the scroll position to 0 invisibly, the browser is like "NOPE!"). 
2. You're using a pretty old version of GSAP. I'd strongly recommend updating to the latest version (3.14.2 right now). 

[astronaut954]

42 minutes ago, GreenSock said:

I see two problems: 

1. You've got scroll-behavior: smooth (that's like applying a CSS transition to something animated with GSAP - the browser basically refuses to set values immediately, so when GSAP recalculates positions and temporarily sets the scroll position to 0 invisibly, the browser is like "NOPE!"). 
2. You're using a pretty old version of GSAP. I'd strongly recommend updating to the latest version (3.14.2 right now). 

Thank you so much! That was much simpler than I thought 😅