Horizontal Scroll glitches if there is a page transition

[yazan-slaim]

Hi,
I have implemented horizontal scrolling on a component, and it works perfectly. However, if I add a page transition, the horizontal scrolling glitches and does not start properly. I checked the markers, and it seems that the triggering start shifts to the bottom of sectionRef,or 100vh lower instead of the top of section, which is how it should behave. Please try the horizonal scroll with page transition and without it, to see how it should work. You can comment the function in useGsap on page.jsx. Any improvements you can do to horizontal scroll would be appreciated:)
what I found:

The problem is related to the pin property, but it is necessary to keep, for functionality. The issue that pin spacer does not shift up with the other components it does not change it's position.

here is the stackbiltz demo:

https://stackblitz.com/edit/stackblitz-starters-61byf2?file=app%2Fpage.jsx

[Rodrigo]

Hi,

 

Your demo doesn't show any other page nor page transition so I'm afraid there is no way for us to tell if/where there is an issue. For what I can see the demo works as expected.

 

Maybe this can provide some ideas:

https://stackblitz.com/edit/react-6rzfpp

 

Happy Tweening!