Horizontal scroll glitchy animation while scrolling

[Yagnik Patel]

Hello Community. First of all, thank you very much for this very beautiful platform. I am very new and first time posting a question and sorry If I make any mistakes. I found one codepen as per my requirement but I found one issue in it. While scrolling in the horizontal section there is some glitch in the last section it distorts for a fraction. Help is appreciated. Please check the scroll between Horizontal 1 and Horizontal 2 sections.  Here is the pen and loom link also.

 https://www.loom.com/share/d089bea672d7443d8af6394175f91f66?sid=ee6348c6-754d-479c-9cd4-784a8ff4d331

See the Pen bGZpzRx by Yagnikpatel (@Yagnikpatel) on CodePen

[Toso]

Hi @Yagnik Patel while working with frameworks you can use  Stackblitz starter templates to create your demos it will be easier, 

 

also here is a working demo for snapping vertically and horizontally

See the Pen eYrOObw?editors=0010 by GreenSock (@GreenSock) on CodePen

because in your demo a lot of things were going on and this handleScroll function you created and playing on window scroll event looks sus to me 🫡

 

and since you are working with react you can use the useGSAP hook https://github.com/greensock/react

 

[Rodrigo]

Hi,

 

We also have this resources to use GSAP in React projects:

https://gsap.com/resources/React

 

Happy Tweening!