Jump to content
Search Community

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 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

 

Link to comment
Share on other sites

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

 

  • Like 1
  • Thanks 1
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...