GSAP timeline animation sequence problem

[gsapnooby]

I have been trying to sequence two animation on scrollTrigger using GSAP timeline and scrollTrigger plugin. First Animation works fine but the second one is not working as expected. The second animation should make the cards scroll horizontally on scroll and fade out.  

 

Another problem is, the cards don't have equal width. I have tried various combination of tailwind flex configuration but I couldn't active the desired effect. 

 

you can see the demo code in the attached codepen. 

See the Pen QWojLZE?editors=1010 by xblack (@xblack) on CodePen

[Rodrigo]

Hi,

 

Instead of animating xPercent, just use a function based value using the container width and the window width. Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[gsapnooby]

@Rodrigo I want the cards to scroll horizontally slowly, not that fast as it is happening in my original code. Also, I want the cards to fade out one by one, not all in one go.

 

Please also tell me  how can I make cards equal width? 

[mvaneijgen]

Check out this tutorial how to work with ScrollTrigger 

 

 

 

As the video also suggests remove ScrollTrigger, makes live so much easier! You want the cards to move out one by one, then just update your tween to reflect that what you want. If you want things to animate slower on scroll, just increase the scroll distance. You have it set to bottom: "=+200", just change that to 400% it will be twice as long or even see how it feels on 1000! You're in charge!

 

Making them equal with has nothing to do with GSAP and we like to keep this forum focused on GSAP questions only. That you can fix with just pure CSS, I see you're using tailwind, so check the tailwind docs how to make things equal with. Hope it helps and happy tweening! 

 

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