How to conditionally reference a variable's name?

[Visual-Q]

var slide = document.querySelectorAll(".slide"),
    slideAnimation = [];

var slideTL0 = new TimelineMax();
var slideTL1 = new TimelineMax();
var slideTL2 = new TimelineMax();
var slideTL3 = new TimelineMax();

for(i=0;i<slide.length;i++){
    slideAnimation.push(slideTL + i);// how to conditionally refrence a variables name, in this cae using i
}

slideAnimation[2].play();

 

I'm working on something where I'd like to push some timelines to an array based on having the index position as part of the timelines name. I know that as it is now .push(slideTL + i) just looks for a variable slideTL and tries to add i to it which is obviously wrong but is there a way to do something similar.

[PointC]

I've never needed to do that nor do I know if there may be a better way, but this should work.

 

slideAnimation.push(window["slideTL" + i]);

 

 

[Carl]

you could also use eval()

var var1 = "pancakes";

console.log(eval("var" + 1));

 

However, people say eval() is bad.

 

In cases where I need to do things like you are doing I usually just push the thing (in this case your timeline) into an array as soon as its created and then just grab it by its index in the array.

[PointC]

3 minutes ago, Carl said:

just push the thing (in this case your timeline) into an array as soon as its created and then just grab it by its index in the array.

 

That's what I always do when I need a bunch of timelines. Loop, create and push them into the array. 

[Visual-Q]

17 minutes ago, Carl said:

In cases where I need to do things like you are doing I usually just push the thing (in this case your timeline) into an array as soon as its created and then just grab it by its index in the array.

 

Yeah that's what I was thinking I wasn't sure if I could put "new TimelineMax({paused:true}" directly in a push parameter but it works.

 

for(i=0;i<slide.length;i++){
    if(i>0){TweenLite.set(slide[i],{yPercent:100});};
    slideAnimation.push(new TimelineMax({paused:true})); ;
}

slideAnimation[0]
 .to(".slide0 h1",2,{xPercent:15,delay:1});
slideAnimation[0].play();

slideAnimation[1]
 .to(".slide1 h1",2,{xPercent:30});

slideAnimation[2]
 .to(".slide2 h1",2,{xPercent:45});

slideAnimation[3]
 .to(".slide3 h1",2,{xPercent:60});

 

[OSUblake]

Use an object or Map if you want to store stuff by name.

 

var map = new Map();
var obj = {};

for(var i = 0; i < 10; i++){
  
  var tl = new TimelineMax();
  
  obj["slide" + i] = tl;
  map.set("slide" + i, tl);
}

console.log(obj.slide3 === map.get("slide3")) // true

 

 

[PointC]

Well, look who surfaced for air. We didn't even have to use the word canvas.