Jump to content
Search Community

Staggering Multiple Timelines

Borne Agency test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

there are 2 key components to solving this:

  • you need to know what the "next animation" is. usually you assign this to a variable every time you click a new button
  • the current animation needs an onReverseComplete callback function that will trigger the "next animation" or "requested animation"

Below are 2 similar approaches

 

See the Pen XMygdo by GreenSock (@GreenSock) on CodePen

 

See the Pen yJLyxM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
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.
×
×
  • Create New...