Get a timeline with Javascript

[Robert May]

Hi! Is there a way to get a timeline with Javascript, something like getElementById? I have multiple timelines that are synced with audio and I need to change timelines when I change the audio files.

 

Thanks

[Shaun Gorneau]

@Robert May Timelines are objects that can be stored in a variable for reference. Example

 

var tl1 = new TimelineMax();

var tl2 = new TimelineMax();

var tl3 = new TimelineMax();

 

Hope this helps!

[Robert May]

Thanks for the reply Shaun. The problem may be that I'm using a text variable "currentTimeline" + "Tl". This gets the name of the timeline and the console logs as "slde1Tl" as it should, but getElementById returns tempTimeline as "null".

 

console.log(currentTimeline + "Tl")

var tempTimeline = document.getElementById(currentTimeline + "Tl")
tempTimeline.pause();

[Shaun Gorneau]

Hi @Robert May,

 

That's because Javascript doesn't accept variable variable names the way other languages do. For example, in PHP you can do the following

 

$foo = 'bar';

$$foo = 'baz';

echo $bar; // output would be 'baz'

echo ${$foo};  // output would also be 'baz'

 

In Javascript, variables are stored as properties of the window object. So the following illustrates how to use variable variable names in Javascript

 

 var tl0 = new TimelineMax({paused: true});
 var tl1 = new TimelineMax({paused: true});
 var tl2 = new TimelineMax({paused: true});
 var tl3 = new TimelineMax({paused: true});

for( var i=0; i<4; i++ ){
 	 console.log( window['tl'+i] ); // outputs the timeline objects
}

 

 

I assume in your example ...

 

console.log(currentTimeline + "Tl")
var tempTimeline = document.getElementById(currentTimeline + "Tl")
tempTimeline.pause();

 

... that `currentTimeline` simply refers to a string ... so console.log will simply concatenate and output what you expect, but that doesn't refer to any timeline. The way you are trying to reference the timeline is through an element selector, which won't work (that's looking for a DOM element). Timeline's are Javascript objects. So, as in the previous examples, the way to reference a Timeline is by its assigned variable name. 

 

Here is a codepen illustrating variable variables in Javascript and how to reference a timeline. Hope it helps!

 

See the Pen ZVbBae by sgorneau (@sgorneau) on CodePen