gsapnooby Posted December 30, 2023 Share Posted December 30, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 30, 2023 Share Posted December 30, 2023 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! Link to comment Share on other sites More sharing options...
gsapnooby Posted December 31, 2023 Author Share Posted December 31, 2023 @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? Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 31, 2023 Share Posted December 31, 2023 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now