Start a tween after a series of other tweens have finished

[eerdepeer]

I am building a menu where the buttons come out and grow in height (vertically), and then grow in width (horizontally) and after that they display text and an image. The buttons are positioned next to each other, but they may not overlap the neighbor button. I have added a close-up of the menu.

The background (in this button the picture of the building) is hovering up and then growing in with so it becomes the with of all the three buttons. After this screenshot, the text fades in.

 

Is there a way to start the tweening of the next hovered button only if all the other buttons are hovered back in place (so they won't overlap each other)?

 

So for example: in the screenshot the "Contact" has almost completely finished its tweening. When the mouse cursor hovers over the "About" button, the Contact button has to tween back 'into the contact button' first, before the About button is allowed to start its tweening.

 

My question: how on earth can I do that? The use of onComplete is useless, because you don't know which of the buttons will be hovered next.

[GreenSock]

Sure, there are multiple ways to do this, but frankly I think it's a bad idea from a user experience perspective. Buttons should work consistently and I shouldn't have to sit there and wait for an animation to finish before the button "works". Why not just manage the depths of the objects so that the most recently rolled-over one is always on top? Anyway, that's just an idea/opinion.

 

You can definitely use an onReverseComplete to accomplish this sort of thing. Here's some pseudo (untested) code to illustrate the concept:

 

var queuedBtn:DisplayObject;
var currentBtn:DisplayObject;
var timeline:TimelineLite;

function over(event:MouseEvent):void {
gotoBtn(event.target);
}

function out(event:MouseEvent):void {
timeline.reverse();
}

function gotoBtn(btn:DisplayObject):void {
if (btn != currentBtn) {
	if (timeline == null) {
		currentBtn = btn;
		timeline = new TimelineLite({onReverseComplete:onBtnClosed});
		timeline.append(...); //put your animation code here
	} else {
		queuedBtn = btn;
		timeline.reverse();
	}
}
}

function onBtnClosed():void {
timeline = null;
currentBtn = null;
if (queuedBtn != null) {
	gotoBtn(queuedBtn);
	queuedBtn = null;
}
}

[eerdepeer]

Excuse me for not replying too soon. I've read your post though. I think I'll have to study the TimelineMax class furthermore before I can implement this stuff in my movie. Actually the AS3 code is a little too advanced for me. I guess I'll have to script a little more

Regards