[Staggering Multiple Timelines]

Hey guys - just started with greensock, loving it so far but stuck on a small issue - probably a rookie mistake!

 

I have a couple of timelines set, when stageTwoOpen is clicked I want to reverse stageOne, after this has finished play stageTwo.

When stageOneOpen is clicked I want to reverse stageTwo then play stageOne.

 

This is my code so far:

 

var stageOne = new TimelineMax()

stageOne
	.fromTo("#stageOne", 1, {opacity: .8, xPercent:0 }, {opacity: 1, xPercent:100, ease: Power3.easeOut})
	.staggerFrom("#stageOne .fadeIn", 0.75, {opacity:0, x:20}, 0.2);

var stageTwo = new TimelineMax({paused: true})

stageTwo
	.fromTo("#stageTwo", 1, {opacity: .8, xPercent:0 }, {opacity: 1, xPercent:100, ease: Power3.easeOut})
	.staggerFrom("#stageTwo .fadeIn", 0.75, {opacity:0, x:20}, 0.2);


$('.stageTwoOpen').on('click',
function() {
  stageOne.reverse();
  stageTwo.play();
});

$('.stageOneOpen').on('click',
function() {
	stageTwo.reverse();
	stageOne.play();		
});

 

This works - but plays the reverse and play at the same time - it works with a delay:

 

stageOne.reverse();
TweenLite.delayedCall( 3, function(){ stageTwo.play() } );		

but figured there must be a tidier way of doing this?

 

Any help greatly appreciated

 

Thanks