amitr95 Posted August 10, 2022 Share Posted August 10, 2022 I'm trying to mimic the an effect where cards unstack on scroll. For visuals, please click here to view a GIF of the effect. The website the above GIF is from is this website. Now, I've tried to mimic the above using GSAP / ScrollTrigger. However, my effect differs in the following aspects: The cards stack on top of each other in my demo, but reveal themselves in the demo I'm trying to mimic (see image of the design I'm trying to achieve here). I've tried z-indexing but this didn't do the trick. The cards pin to the top of the page, whereas I'm looking for it to be centered. It doesn't unpin when you've passed .cardStacking (carries on until the end of the page) Please view demo on 1200px + width. See the Pen gOejvde by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 10, 2022 Share Posted August 10, 2022 Lol I knew that demo seemed familiar, someone else on this forum had the same question see below. 2 Link to comment Share on other sites More sharing options...
amitr95 Posted August 10, 2022 Author Share Posted August 10, 2022 @mvaneijgen - Haha, I guess that module is really popular 😂 Thanks for bringing that to my attention I have tried to emulate the demo provided in that answer, however, I'm receiving differing results. The cards on my demo do not stack and they blink out when scrolling? I'm also unsure on what's creating the huge space between text to the cards. See the Pen ZExjMYX by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 10, 2022 Share Posted August 10, 2022 Hey there Amit. Just wondering if you've taken a look at our ScrollTrigger video? It's super helpful and will give you a better idea of trigger start and end points, toggleActions and how pinSpacing works. Introducing ScrollTrigger for GSAP from GreenSock on Vimeo. 1 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