Scroll Trigger Horizontal + Vertical Scrolling

[vdev]

Hey there! I am new to gsap and have searched a lot though forums and have also tried to create a scrolling effect like one given below. Can someone please suggest me how can I get such a scrolling effect using ScrollTrigger. Thank You

[Trapti]

hey, @vdev welcome to the forum. 

See the below pen your requirement is opposite of this pen as per my understanding. Try creating a minimal demo using this. And let us know if you need help. 
 

See the Pen MWOqQmX by akapowl (@akapowl) on CodePen.

 

[vdev]

Thank You @Trapti for your response, I will try to create a minimal demo and reply if I need further help.

[vdev]

Hello @Trapti, sorry for disturbing again, I tried to solve the problem with the code you share. But, here all the horizontal scrolling tabs are together, while in my case there is a vertical scrolling section in between. Moreover, since the natural scrolling of a browser is vertical itself, so it is easier to shift from vertical to horizontal in between. So, if possible, can you suggest me any other approach regarding the problem. Thank You.

[Cassie]

Hey @vdev

Here's a demo - you'll just have to loop around to add each horizontal scrolling section you need.

See the Pen YzEJBQm?editors=1010 by GreenSock (@GreenSock) on CodePen.

[vdev]

Thank You so much for your help @Cassie.

[vdev]

Hey @Cassie, sorry for disturbing again. I tried to create the kind of animation I posted in the question using the pen you provided, and I could figure out only this much.

See the Pen eYeQBpG by vasudevsall (@vasudevsall) on CodePen.

As you can see on the link above, I am not able to find a way to scroll directly from long section to third section, i.e. green section. If possible, could you please take a look. Thank You. 

[OSUblake]

Hi vdev,

 

This thread looks similar to what you are doing.

 

 

[vdev]

Thank you so much @OSUblake, for your help.