jQuery each with delay - call next timeline when all are done

[PointC]

I've managed to confuse myself today.

 

 

I have a group of 5 elements that all do something a bit different based on their index as well as an index based delayed start. So far no problem - jQuery's each method works fine for that. I have more animations that I want to play after the last 'each' timeline has finished though.

 

 

I'm having trouble figuring out the best way to make sure the last 'each' timeline is finished before calling the function with the next timeline. I currently have the function call on the 'each' timelines, but that's obviously not right because it will be called 5 times. 

 

 

Should I be creating a master timeline from the 5 'each' timelines and calling the function at the end of that master? or is jQuery's each method not the best choice here? Should I be using a regular loop and creating those 5 timelines? What's the easiest way to make this happen?

 

 

Thanks.

 

See the Pen MyVoaE by PointC (@PointC) on CodePen

[OSUblake]

Isn't that similar to this question?

http://greensock.com/forums/topic/14002-nested-timeline-stagger/

 

So like this...

See the Pen yOKXzp?editors=0010 by osublake (@osublake) on CodePen

[Diaco]

there are many ways with same results , but maybe something like this 

if(i==$boxes.length-1) tl.vars.onComplete = part2 ;

See the Pen KzoqQy by MAW (@MAW) on CodePen

[PointC]

Good grief!  I knew I just read that answer not too long ago, but couldn't remember which post it was. 

 

I even searched the forum - not sure how I missed that.

 

I even got some sleep last night so I have no excuse.

 

Blake schools the new moderator.   

 

Edit - just saw your post Diaco. I like that too. Thanks much.

[Sarliking]

You can do the delay execution of a function using the settimeout & setinterval which are timer method of javascript. So you can apply 5 seconds delay on you animation with

setTimeout(function(){ //your logic }, 2000);