Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sygol

Use stagger effect after two animations complete

Recommended Posts

Hi guys,

 

I am having a bit of issues with stagger and chained animations within a timeline. I am trying to create a stagger animation on the parent div, which would then include two different tweens (p.first and p.second) within the timeline. Once the animation for the first div is complete, then the next parent div would fire, followed by the third, etc. So basically, GSAP to run:

1) stagger starts; first div anim; 2) p.first anim; 3) p.second anim; 4) end first div anim; 5) begin second div anim; 6) etc. 

GSAP’s default behaviour is to run 1) stagger anim. on all divs, 2) p.first anim; 3) p.second anim

Is the desired behaviour possible?

 

Thanks!

See the Pen eYJRLbV by kuba-sygowski (@kuba-sygowski) on CodePen

Share this post


Link to post
Share on other sites

Hi @Sygol!

You can try something like this:

See the Pen dyGRgeY?editors=1010 by -greg- (@-greg-) on CodePen

 

My idea was stagger (no visible animation) -> use onComplete callback -> get element what complete -> get childrens of this element -> animate childrens

  • Like 1

Share this post


Link to post
Share on other sites

Thanks guys,

@Nekiy2 I didn't think of doing it this way, this is nice solution, the only problem is that we kind of get out of our timeline then.

I guess, there is no other way than stick with Zach solution, and then if I want to randomise it I would need to shuffle elements inside items array with JavaScript first

Share this post


Link to post
Share on other sites
9 minutes ago, Sygol said:

I would need to shuffle elements inside items array with JavaScript first

FYI, GSAP can do that for you. gsap.utils.shuffle()

 

So...

gsap.utils.shuffle(gsap.utils.toArray(".item")).forEach(...);

 

  • Like 5

Share this post


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.

×