Poylar Posted December 20, 2022 Share Posted December 20, 2022 hi, i try to make cards effect from this website https://www.createwithplay.com/ (section on screenshot) I tried many variations but they all failed, could you help me understand how to implement this, please? I can see that position:sticky is used in the example, but I can't use it because I'm using the gsap smooth scroller plugin. At first I thought that it would be possible to pin section when I enter it, but I did not understand how I should move it up further. I think my problem is that I can't determine the start and end parameters. Thank you for any help See the Pen rNrNPNM?editors=1010 by poylar (@poylar) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2022 Share Posted December 20, 2022 Have you seen the latest video from the Greensock Youtube channel? It demonstrates this exact websites effect and how to build it with GSAP! The gist is as follows. Just build the animation first worry about scrolling later. Hope it helps and happy tweening! Quote The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 2 Link to comment Share on other sites More sharing options...
Poylar Posted December 20, 2022 Author Share Posted December 20, 2022 1 hour ago, mvaneijgen said: Have you seen the latest video from the Greensock Youtube channel? It demonstrates this exact websites effect and how to build it with GSAP! The gist is as follows. Just build the animation first worry about scrolling later. Hope it helps and happy tweening! thank you, that work. but how i can remove this "extra space" after section? pinSpacer make 2000px padding , can i remove this? Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2022 Share Posted December 20, 2022 I don't know I can't see what you're looking at. Can you provide a minimal demo? Link to comment Share on other sites More sharing options...
Poylar Posted December 20, 2022 Author Share Posted December 20, 2022 2 minutes ago, mvaneijgen said: I don't know I can't see what you're looking at. Can you provide a minimal demo? See the Pen abGYbGm?editors=0110 by GreenSock (@GreenSock) on CodePen this demo from video i wanna remove this padding Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2022 Share Posted December 20, 2022 Yes that is a demo, but we want yours, because your example probably doesn't look like this example. If you want the next section to not have any spacing you'll will have to make it part of the section you're pinning. See the Pen wvxvZjY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Poylar Posted December 20, 2022 Author Share Posted December 20, 2022 6 minutes ago, mvaneijgen said: Yes that is a demo, but we want yours, because your example probably doesn't look like this example. If you want the next section to not have any spacing you'll will have to make it part of the section you're pinning. I'm not sure we understood each other. I want to remove padding of the pin spacer I mean: if i remove all js and CSS position next section will be closer to cards, watch screenshot: i want same position with gsap animation Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2022 Share Posted December 20, 2022 Yes but you're pinning the container and then moving the elements up, so there will be a gap at some point. You can set pinSpacing: false (see docs https://greensock.com/docs/v3/Plugins/ScrollTrigger), but this will probably not do what you think it does. I think the best solution would be to have the element you don't want to have spacing to be part of the pinned container (see my last codepen), but this will change everything, so the best thing to do again is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Explaining al this in text is really complicated, it is much easier to help you if you provide a minimal demo, this way we can see your thought process and better see how we can help you. A minimal demo is something you've made and tried somethings to show what you've already tried. The best way to learn is to get your hands dirty and trying new things! Codepen is amazing for this, because you can just keep forking your pens and trying out different solutions. Link to comment Share on other sites More sharing options...
Poylar Posted December 20, 2022 Author Share Posted December 20, 2022 24 minutes ago, mvaneijgen said: Yes but you're pinning the container and then moving the elements up, so there will be a gap at some point. You can set pinSpacing: false (see docs https://greensock.com/docs/v3/Plugins/ScrollTrigger), but this will probably not do what you think it does. I think the best solution would be to have the element you don't want to have spacing to be part of the pinned container (see my last codepen), but this will change everything, so the best thing to do again is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Explaining al this in text is really complicated, it is much easier to help you if you provide a minimal demo, this way we can see your thought process and better see how we can help you. A minimal demo is something you've made and tried somethings to show what you've already tried. The best way to learn is to get your hands dirty and trying new things! Codepen is amazing for this, because you can just keep forking your pens and trying out different solutions. okay i make it See the Pen rNrNPNM by poylar (@poylar) on CodePen you solution with push section in pinned container works, but i dont wanna break my semantic structure. so may be one more solution? I also have suspicions that pinSpacer creates space for another section (which is not) I'm sorry for being so stupid, but believe me, I've tried a lot of options and read all the documentation, but I still can't beat pinSpacer Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted December 20, 2022 Solution Share Posted December 20, 2022 Make it so your last section doesn't animate then you'll have no gap See the Pen ZEjEgqY by mvaneijgen (@mvaneijgen) on CodePen 3 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