Animation with GSAP Staggering

[Sushant Sharma]

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

[ZachSaucier]

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?

[Sushant Sharma]

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.

[ZachSaucier]

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

[Sushant Sharma]

Thank you so much @ZachSaucier for your solution. I was looking for exactly the same solution.
I like working with GSAP.