ScrollTrigger+React + pinning - on mobile it jumps and overlaps between sections

[NishiChu]

Hello members !
I am facing this particular problem with GSap + react code. My homepage has various sections which are all different components. 

We are not able to create a minimal demo- but here is the development page : <removed since we are not live>

This page is built for mobile view specifically - if one scrolls through on a mobile you can see  the pinning occurs with a jerk, sections are pinned but when going up and down the below section overlaps and comes above the top one. Ideally the section above should scroll up and the one below come after that 

 

Please help- we have really not been able to have a breakthrough..  tried using css scroll-snap which makes the snap smoother but then within the section the scrolltrigger based animation do not work

 

Any help will be appreciated !

Edited May 5, 2023 by NishiChu
had put in our development link with all the features

[Rodrigo]

Hi,

 

Sorry about the troubles you're having but it's really hard for us to debug a live site.

 

What you could try is using the anticipatePin configuration option:
 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

 

If that doesn't work, then maybe try using will-change: transform in some elements of your site.

 

Pinning is a very complicated and tricky thing to accomplish and solving these situations is not easy since it also comes tied to the device hardware as well.

 

Sorry I can't be of more assistance. Hopefully other users can chime in with some sort of solution for this.

Happy Tweening!

[GreenSock]

I'd strongly recommend trying this: 

ScrollTrigger.normalizeScroll(true);