Jump to content
Search Community

Using GSAP / ScrollTrigger to create card stacking effect on scroll

amitr95 test
Moderator Tag

Recommended Posts

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:

 

  1. 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.
  2. The cards pin to the top of the page, whereas I'm looking for it to be centered.
  3. 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

@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

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...