Using an array to loop timelinelite or timelinemax

[sorciereus]

So I have a loop of lights lighting and diming - right now I have this happening in timelinelite with results that I find satisfactory. However, I'm wondering if any of you devs have a even more streamlined way of accomplishing this via timelinemax and an array? Can you let me know anymore details about the technic I'm demonstrating here?

var tl = new TimelineLite();
tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ;

[Jonathan]

Hello sorciereus,

 

This might not answer your question exactly, but you could try with a object literal instead of an array.

 

Example:

See the Pen Croyi by jonathan (@jonathan) on CodePen

 

Showing limited code, but you get the idea?

var obj = {
  0 : {
      "target": "#lens_flare1", 
      "duration": .25, 
      "vars": {autoAlpha:0, scaleX:1.2, scaleY:1.2}
  },
  1 : {
      "target": "#lens_flare2", 
      "duration": .25,
      "vars": {autoAlpha:0, scaleX:1.3, scaleY:1.3}
  },
};

var tl = new TimelineMax({repeat:-1});
    
var i = 0;

// loop through object key and value
for (var key in obj) {
  
        tl.to(obj[i].target, obj[i].duration, obj[i].vars);
  
        // outputs 
        // var target = obj[i].target;
        // var duration = obj[i].duration;
        // var vars = obj[i].vars;
        // var autoAlpha = obj[i].vars.autoAlpha;
        // var scaleX = obj[i].vars.scaleX;
        // var scaleY = obj[i].vars.scaleY;
  
       i++;
}

The reason i did it in a object literal instead of an Array, is because in my opinion its better to store your key and value pairs. So you can pass the vars object in the obj variable.. all in one object, instead of individual keys.

 

You could make it so each vars property is broken down separately, but i like the ease of just passing in the whole vars object instead. Just my personal preference.

 

Resources about objects:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

 

Does that help?

[GreenSock]

On other thing to mention: if they were all going to identical end values, you could use staggerTo():

var elements = ["lens_flare1","lense_flare2","lense_flare3"...]; 
var tl = new TimelineLite();
tl.staggerTo(elements, 0.25, {alpha:1, scale:1.2}, 0.25)
  .staggerTo(elements, 0.25, {alpha:0, scale:1}, 0.25, 0.25);

I realize your example had some different values mixed in, though. 

 

Also notice you can use "scale" instead of "scaleX" and "scaleY" if they'll be the same.