vdev Posted February 28, 2022 Share Posted February 28, 2022 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 Link to comment Share on other sites More sharing options...
Trapti Posted February 28, 2022 Share Posted February 28, 2022 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 3 Link to comment Share on other sites More sharing options...
vdev Posted February 28, 2022 Author Share Posted February 28, 2022 Thank You @Trapti for your response, I will try to create a minimal demo and reply if I need further help. Link to comment Share on other sites More sharing options...
vdev Posted February 28, 2022 Author Share Posted February 28, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted February 28, 2022 Share Posted February 28, 2022 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 3 Link to comment Share on other sites More sharing options...
vdev Posted February 28, 2022 Author Share Posted February 28, 2022 Thank You so much for your help @Cassie. Link to comment Share on other sites More sharing options...
vdev Posted March 1, 2022 Author Share Posted March 1, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted March 1, 2022 Share Posted March 1, 2022 Hi vdev, This thread looks similar to what you are doing. Link to comment Share on other sites More sharing options...
vdev Posted March 2, 2022 Author Share Posted March 2, 2022 Thank you so much @OSUblake, for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now