Stack card issue

[OnyxN]

Hi All,

 

I faced issue on stack card design when scrolling. I want to show card by card . All card are overlap each other except first card. How to solve it? Here is my working file.

 

I want this kind of scroll effect. 

 

Please help me. Thanks alot.

See the Pen mdZYzzy by OnyxJoy (@OnyxJoy) on CodePen.

[mvaneijgen]

The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

With these kinds of things I like to make it simple, don't worry about optimising your code just build what needs to happen before you start optimising. I've got a whole post about his, I think this will really help you. 

 

 

 

Just write out what you think needs to happen and if you have a working version, see if you can see a pattern emerge and then fork your pen and try and implement that version. Hope it helps and happy tweening! 

 

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

[OnyxN]

Hi @mvaneijgen,

 

Thank you ur advise. It is really help. I solved the problem and updated in codepen.

 

 

Cheers,