[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @Rodrigo, Thank you for your reply.

 

Below is the Demo for the code given by @GreenSock. Its working perfectly. The index is getting logged.

https://codesandbox.io/s/gsap-react-horizontal-scroll-forked-lgj0t6?file=/src/scenes/Scene.jsx

 

Below is the same code + 2 Lines I have added to store that page index as a state variable. But when the setState is called, the animation is abrupted. 

 

https://codesandbox.io/s/gsap-react-horizontal-scroll-forked-jid5oy?file=/src/scenes/Scene.jsx

 

 

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @GreenSock, I tried the above code. The Index is getting consoled perfectly. But the problem is that when I take the index out from the function to use it as a state variable, the whole animation is failing and behaving randomly. Is there a way that I can use that index value as a state without calling the uselayoutEffect again...?

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Thanks @GreenSock!!! You are the Best!!! 💌

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @GreenSock  : One more Help!! I am building a pagination kinda thing for the horizontal slides which I have build using the above code. I just need the active / snapped slide/page number for that to function properly. In the above code is there any way we can grab the number [1,2,3,4] of the slide which is in the viewport...?

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @GreenSock , I had implemented the first option to my website and it worked great. But I got several feedback from users when they were using the sites in mobile. the Scroll Delay worked well for the 1st & Last Container. But Is there a way we can add similar scroll pause to the 2nd & 3rd Slides also...? I tried several options but couldnt make it work. Any help would be appreciated.

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @GreenSock Thank You very much!!! The first option works well for my usecase. But thank you for the second option also got me an exposure for the timeline usecase also. Appreciate your prompt support!! ❤️

[Horizontal Scroll GSAP + Scrolltrigger + React - Dude]

Hi @GreenSock , I have been trying to add one extra effect in the below codesandbox 

https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js

 

What I was looking for is once the horizontal scrollable 'slider' is pinned, then the horizontal animation should not start untill user scrolls some distance. ie. the animation to be paused for some pixels. then the scrolling can start and also when it reaches the last container in the slider div, also then some pause in scrolling should happen. 
 The purpose is to have some buffer so that 1st & last slides in the horizontal scrolling section is not missed by user. 

Any Help appreciated..