Jump to content
Search Community

Scrollable container inside a pined container

Moderator Tag

Recommended Posts


I want to create a section that has a header, and a container with multiple card. I would like to have the main section pinned and the cards container scrollable to show the next row of card. Only the first row should be visible. After the cards container finishes the animation I would like for the section scroll to start working as initial. 

This is what I got so far. I am having trouble making the cards container have a smooth scrolling and the section to stay pinned until the card container animation finishes.

See the Pen QWQXmBz by raul-rogojan (@raul-rogojan) on CodePen

Link to comment
Share on other sites

Is there a way I could make the pin last longer? The card do not finish scrolling all the way down and the cardSection gets unpinned.

Link to comment
Share on other sites

That's because your yPercent isn't moving things as far as you want. You've got margin between those elements and you didn't factor that into your equation. So in this case you need about another 25%:

yPercent: -100 * (elements.length-1) - 25,

But since your margins are in px and your height is in vh, it gets messy - I would simplify it to this: 

y: () => cards.offsetHeight - cards.scrollHeight,


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


Is that what you're looking for?

Link to comment
Share on other sites

Yes, thank you very much! 

Is there a way I could make each row have opacity 0 and as they scroll into view have opacity 1 and when scrolled out of view have opacity 0 again? I tried creating a new gsap on cards and use toArray.forEach(."card") but it did not worked. 

Also snapping would be a great addon but i did not manage to do that either.  

Link to comment
Share on other sites

Yes, thank you much! 

@GreenSock I have experimented a bit in the original codepen. I would appreciate if you could take a look and point out what I am missing. Thank you! 

Link to comment
Share on other sites

I have created another pen with is much closer to what I am going for. 

See the Pen NWyQGyz?editors=0010 by raul-rogojan (@raul-rogojan) on CodePen

The issues are that I would like for the scroll to me slower. I would like for the cards to take longer to get into view. Also it would be awesome if I could get rid of the cardsContainer, also each row snapping also would be grate. The main issue stand for the mobile, doesn't really look nice on mobile.



Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my list of requirements: please fix my project so that it does ___ and then ___ and then ____ and also ___" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 


If you want it to last longer, adjust your end value. So instead of "+=800", you could do "+=2000" for example. And you probably want to set the ease on those tweens to "none" (just a guess). As for snapping, please read the docs and take a crack at it - if you get stuck, just post a minimal demo back here with a specific GSAP-related question and we'd be happy to take a peek. 

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.
  • Create New...