Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sushant Sharma

Animation with GSAP Staggering

Recommended Posts

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 post
Share on other sites

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?

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×