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.