Sushant Sharma Posted October 5, 2020 Share Posted October 5, 2020 Hi guys, I am new to GSAP animations, I love everything about this framework. It has made so many lengthy tasks very simple, short and fast too. But unfortunately I am stuck at one point. If you go to my codepen demo, when you click on 'button', you will see a stagger animation which is working fine. I have 6 boxes there and the 5th and 6th number boxes overlaps the 1st and 2nd. I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in. See the Pen NWrKPjj by Swooshant (@Swooshant) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 5, 2020 Share Posted October 5, 2020 Hey Sushant and welcome to the GreenSock forums. 1 hour ago, Sushant Sharma said: I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in. To do that you'll need a second tween that does the fading. Do you need that to be more dynamic? Like will there be a variable amount of boxes and you need to calculate how many will need to fade out before new ones fade in? What's your situation? Also should boxes 1 and 2 fade out while others are fading in? Or fade out after the first 4 have faded in fully? Or fade out at the same time boxes 5 and 6 are fading in? Please make your goal more clear so we can do a better job of helping Also I noticed that you're positioning all of your boxes absolutely. Why is that? 2 Link to comment Share on other sites More sharing options...
Sushant Sharma Posted October 6, 2020 Author Share Posted October 6, 2020 Thank you @ZachSaucier Yes there are variable numbers of boxes but they will be coming in a set of 4. Boxes should fade out when 5 and 6 boxes fade in. 14 hours ago, ZachSaucier said: Also I noticed that you're positioning all of your boxes absolutely. Why is that? Oh that, actually where I am using this animation, I had to position them absolute but yes not in the codepen. Sorry for that. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 I went ahead and generated the boxes dynamically based on some parameters to test to make sure it worked with a dynamic amount of elements. But the core of what you're asking just relates to the two tweens at the end of the setupBoxes function: See the Pen GRqKYGO?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Sushant Sharma Posted October 7, 2020 Author Share Posted October 7, 2020 Thank you so much @ZachSaucier for your solution. I was looking for exactly the same solution. I like working with GSAP. 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