Scrollable container inside a pined container

[Guest]

Hi, 

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

[GreenSock]

I'm not entirely sure what you're looking for, but maybe this?: 

See the Pen MWQMPOQ?editors=0110 by GreenSock (@GreenSock) on CodePen

[Guest]

Yes, close enough. Thank you! 

[Guest]

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.

[GreenSock]

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?

[Guest]

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.  

[Guest]

I have updated the codepen. The error i get is that 'toArray' is undefined

[Guest]

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! 

[Guest]

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.

 

 

[GreenSock]

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.