I need the cards to stack vertically with some space from top, It breaks for the third card, please help me in finding the issue

[Rahul Krosuri 0 Likes (Newbie)]

I am pretty new to gsap and I am trying to stack the cards vertically, with the top of the other card peeking, it works for the first two cards but breaks for the third card. I am unable to figure out the issue here even after hours of debugging. Please help me solve this

Thanks in advance

See the Pen xxbrXGy by rahul-krosuri-au6 (@rahul-krosuri-au6) on CodePen

[mvaneijgen 2,491 Likes (Superhero)]

Hi again! Have you seen my previous comment on your other topic? 

 

This video really shows a good way going about creating ScrollTriggered animations. 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. 

 

 

[Rahul Krosuri 0 Likes (Newbie)]

yes thank you for that @mvaneijgen, I tried that for this but couldn't do it even for several values, it comes close for certain values but breaks the remaining cards positions

 

[mvaneijgen 2,491 Likes (Superhero)]

Your pen does not have an animation, it just has a ScrollTrigger for each card. As seen in the video, that is not the best way of going about it. Best is to layout your cards as you want them to end and then create an animation with the cards you want and only when you're happy with the animation add ScrollTrigger to the mix to have them animate on scroll. 

 

Here is a pen with the CSS edited to have to cards stacked on top of each other and then with GSAP animate them .from yPercent: 100 (eg 100% of the height of the cards) in a staggered fashion. The logic is exactly the same as your previous topic only the direction is flipped from x to y. 

 

And I've disabled ScrollTrigger. This is the best tip I can give you, remove ScrollTrigger! Focus on the animation you want to happen and only when that is 100% correct think about implementing ScrollTrigger if you do it at the same time you'll have a bad time and it will be hard to make sense what is or will be happening!

 

See the Pen KKGEYqR?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

[Rahul Krosuri 0 Likes (Newbie)]

thank you @mvaneijgen, will try that

[Rodrigo 5,888 Likes (Superhero)]

Hi,

 

On top of @mvaneijgen's great advice, maybe you could take a look at this codepen example:

See the Pen XWxOwVp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!