Jump to content


Gsap pin and horizontal scroll

Moderator Tag

Recommended Posts

Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?


See the Pen LYgbPXB by sukruemanet (@sukruemanet) on CodePen

Link to comment
Share on other sites

I'm not entirely sure I understand your goal, but it looks like you might be trying to pin elements within pinned elements or something odd like that(?) - I just commented out the last chunk of your code and it seemed to do what I imagine you wanted (but I could be wrong): 

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

Link to comment
Share on other sites

@GreenSock hello, while scrolling in the image I added below, the next item will be the pin that will come over the previous item, and we will see the content while scrolling to the side, and when the sub item is finished, it will continue in this way. can i explain now


like pin example here;

See the Pen e76593366cc841a7ef7b3fae38bea5e6 by akapowl (@akapowl) on CodePen





Link to comment
Share on other sites

Yeah, it looks like you're trying to pin elements inside of pinned elements which cannot work. 


In this particular case, you may be able to get away with using CSS position: sticky: 

See the Pen BaqWJyK by GreenSock (@GreenSock) on CodePen


Beyond that, you've wandered into custom consulting territory - if you'd like to explore our paid consulting options feel free to reach out to us but we can't really provide that in the free forums here (please see the forum guidelines). 

Link to comment
Share on other sites

@GreenSock No, the contents do not overlap each other. :( example sports content must hover over fine arts content

Link to comment
Share on other sites

Sorry, that's way beyond the scope of help we can provide here. It very well might be possible with enough custom JavaScript. Feel free to reach out to us if you'd like to explore paid consulting options. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.