Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sorciereus

Using an array to loop timelinelite or timelinemax

Recommended Posts

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}) ;
Link to post
Share on other sites

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? :)

  • Like 4
Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×