Borne Agency

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