GSAP Scroll animation giving incorrect top position (card stacking effect)

[amitr95]

I have a module where 3 cards stack on top of each other and then, on scroll, the cards will unstack one by one.

 

See GIF of desired effect here

 

I have tried to emulate the above effect using GSAP and ScrollTrigger, however, my animation is yielding undesirable results.

 

Issue(s)

1. From the demo you can see that, as soon as the "scroller start" indicator scrolls to and past the "start" indicator, the cards disappear. Upon inspecting the code, for some reason, when the indicators pass, cardStacking__cards has a top value of top: -1334.52px, which I'm unsure why.
2. The section does not pin when the cards are in view. I'm trying to pin the section until all cards are revealed, and then unpin. I have defined it to pin when cardStacking__cards is in view, but it doesn't pin
3. The 3rd card is showing up as the top card, even though it has a negative z-index compared to card 1.

See the Pen PoRLwJe by amit_rai95 (@amit_rai95) on CodePen

[Cassie]

Hi there @amitr95,
 

FYI - It looks like there's already been pretty comprehensive guidance given on your previous thread.

 

which linked to this thread, with solutions

Anyway - here's a little more help. 

Regarding your pen - The section does pin! I've added markers here, it's just not pinning for very long.

See the Pen eYMXNKE?editors=0010 by GreenSock (@GreenSock) on CodePen

My advice for now would be to just create the animation timeline that you're after without scrolltrigger. Create the stacking animation first, get all the z-index stuff and the movement how you want it. Then you can hook it up to scrollTrigger and make sure it's positioned well and the scroll speed is right.

Another tip would be to just simplify if you get confused. There's no real need for loops and staggers, if you're struggling to gte the result you're after, just step back and tween each card one by one. You can always refactor it later into a loop if you want.

 

See the Pen XWEGbPz?editors=1010 by GreenSock (@GreenSock) on CodePen