Jump to content
Search Community

Question: How create a conditional TimeLine?

GRoliins 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

Hello, I have been using GreenSock tools for a few months now, but I am hitting a bit of a wall with timelines that I don't know how to overcome.


I have successfully created 4 animated timelines that individually run when I call a start() function, e.g. TL1.start(), TL2.start(), etc.


I now want to create a conditional timeline that plays one to four of the other timelines depending on an argument in the super-timeline's function, e.g. :

function superTimeline() {

this.superTL = new TimeLineMax();

// code code code

this.start( number)


   var number = number

   this.superTL.add(TL1.start, 0);

   if ( number > 1 ) { this.superTL.add(TL2.start, 2); }

   if ( number > 2 ) { this.superTL.add(TL3.start, 4); }

   this.superTL.restart(true, false);

} } 


My problem is that the super timeline is not even calling the first, non-conditional timeline function (TL1.start). Can someone please tell me what I'm doing wrong?




Link to comment
Share on other sites

yeah, like Blake said, a demo would really help.


For instance  just looking at


this.superTL.add(TL2.start, 2)


we have no idea what TL2 is.

I would assume it is a timeline but timeline's don't have a start method, so we then have to guess that TL2 is a custom object that you created with a start method but we don't know what TL2.start() returns. And unfortunately one assumption leads to another and its difficult to offer any real actionable advice without a simple, reduced demo that we can edit. I'm sure once you have a demo running we'll be able to figure it out.



  • Like 2
Link to comment
Share on other sites

15 hours ago, OSUblake said:

Hi @GRoliins


I can't tell what's going on based on the code you provided. Can you put that in a simple demo? I think you are just referencing stuff incorrectly.





I'm afraid I can't give a CodePen example of my code, as I'm working on an JavaScript application under NDA. All of the animations are happening in an HTML canvas, so all of my images and movies are JS objects. I can share a slightly obfuscated version of one of my functioning timelines:


function TimeLine4()
	var self = this;

	this.duration = 4.3;
	var duration = this.duration;

	this.pausetime = duration / 2;

	this.visible = false;
	this.isVisible = false;

	//****** Adding in the "Movies" that will play in this timeline ******//
	// rightIdle already added elsewhere
	var fourthBubbleAnim = new BubbleR4TP();
	// avalanche has already been added elsewhere

	this.TL = new TimelineMax(
		useFrames: false,
		ease: Linear.easeNone,
		paused: true,
		align: "sequence",
		callbackScope: self,
		onComplete: function() 
            this.visible = false;
            animationFinished = true;


    this.TL.add(rightIdle.start, 0);
    this.TL.add(fourthBubbleAnim.start, 0);
    this.TL.add(avalanche.start, 2);

    this.start = function()
    	if ( this.visible == false )
    		this.TL.restart(true, false);
    		animationFinished = false;
    		this.visible = true;

    Object.defineProperty( this, 'visible', {
        set: function( value )
            this.isVisible = value;
        get: function()
            return this.isVisible;

    this.draw = function( context )
    	var clearContext = context || ctx;

    	// left idle already drawn
    	fourthBubbleAnim.draw( clearContext );
    	avalanche.draw( clearContext );


// Elsewhere in my code I have:
var TL4 = new TimeLine4();


The above timeline plays properly when I call TL4.start(). I am trying to create a conditional timeline of timelines that adds in (and plays) TL1-4 based on a returned variable.

Link to comment
Share on other sites

I'm not sure I understand your question. Wouldn't it be as simple as:

if (variable === true) {
  TL4.TL.add(someOtherTimeline, position);




(I have a strong suspicion that I misunderstood though)


Or maybe you meant: 

if (variable === true) {
  var master = new TimelineLite();
  master.add(TL1.TL).add(TL2.TL).add(TL3.TL).add(TL4.TL); //assumes you want them to play in sequence.


If you need help, the best thing to do is to create a reduced test case in Codepen (without your real NDA-clad assets) and post it here so we can poke around and see what's going on. 


Happy tweening!

  • Like 3
Link to comment
Share on other sites

I think your second suggestion is what I am looking for. A few questions about it:

1) If I call master.restart() or master.resume(0), it will play through all of the sub-timelines, correct?

2) If I want the master timeline to play different TLs depending on my variable, do I have to set autoRemoveChildren to "true" and then-re-add the sub-timelines each time?


Thanks for your help!

Link to comment
Share on other sites

1) Exactly.


2) You shouldn't need to mess with autoRemoveChildren, no. If I were you, I'd probably just re-create a new TimelineLite instance each time you need to play things in whatever order you want, and add() the timelines to it accordingly. You don't have to keep re-using the same master timeline (though you're welcome to if you prefer). 


Remember, a child animation's playhead is always controlled by its immediate parent (their playheads are aligned). This gives you lots of flexibility and keeps things pretty intuitive. 


Have fun :)

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I'm working on a project where I want to have some slightly different animation depending on certain conditions, and this thread was helpful. 


I did a quick test in Codepen which seems to work fine.  I was wondering if any of the experts can see anything wrong with this approach, or any way to improve it?




See the Pen PaJYLo by ohem (@ohem) on CodePen


Link to comment
Share on other sites

Sure, your approach is totally fine. While I generally love the idea of modularizing chunks of your animation code into functions (as described in https://css-tricks.com/writing-smarter-animation-code/), you shouldn't feel the NEED to do that if you've just got one or two tweens. I'd favor more concise code in that case. 


But yeah, it looks like you've got the general idea. 



  • Like 2
Link to comment
Share on other sites

Thanks for the feedback!  Now, I'm a little stuck trying to delay the remaining tweens until after the conditional tween has played.  It seems shiftChildren would be the answer, but I'm having trouble understanding how to control it. https://codepen.io/ohem/pen/jKGZdq


Any suggestions as to how to delay the timeline at the label until the conditional tween is done?


Thank you.

Link to comment
Share on other sites

Hi @ohem :)


If I understand your desired outcome, I think you'll want to shift the children and then add the new conditional timeline. The stagger is also coming before the label because you have an offset on the label so it won't shift that stagger tween. You could have the stagger start at the label and then it would work correctly. Something like this maybe.



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


Does that help? Happy tweening.



  • 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...