[Question: How create a conditional TimeLine?]

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!

[Question: How create a conditional TimeLine?]

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.

 

 

Hello, 

 

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.pause(0);
        }

	});


    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.

[Question: How create a conditional TimeLine?]

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); }

   etc...
   
   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?

 

Cheers,

GR