[Animation with GSAP Staggering]

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

[Animation with GSAP Staggering]

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.

[Animation with GSAP Staggering]

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