Guest Posted June 22, 2022 Share Posted June 22, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 23, 2022 Share Posted June 23, 2022 I'm not entirely sure what you're looking for, but maybe this?: See the Pen MWQMPOQ?editors=0110 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 Yes, close enough. Thank you! Link to comment Share on other sites More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
GreenSock Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 I have updated the codepen. The error i get is that 'toArray' is undefined Link to comment Share on other sites More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
Guest Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
GreenSock Posted June 23, 2022 Share Posted June 23, 2022 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 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