Generating a timeline using Javascript object

[JoePro]

Good Afternoon

 

i am trying to create a timeline based on a Javascript object, basically my object just refers to functions and custom labels that I want to generate within my timeline:

//object that I want to to use to create timeline with.
var chromeObj = {"box1()":"scene1",
                 "box2()":"scene2",
                 "box3()":"scene3",
                 "box4()":"scene4",
                 "box5()":"scene5"
                };

I am trying to create this type of timeline dynamically.

var master = new TimelineMax();

  master.add(box1(), "scene1")
  .addPause("+=0")
  .add(box2(), "scene2")
  .addPause("+=0")
  .add(box3(), "scene3")
  .addPause("+=0")
  .add(box4(), "scene4")
  .addPause("+=0")
  .add(box5(), "scene5")
  .addPause("+=0");

var master = new TimelineMax();

for (var key in chromeObj) {
  if (chromeObj.hasOwnProperty(key)) {
    
   master.add(key, chromeObj[key]);
   master.addPause("+=0");
  }
   
}

now this does don't work, more so due to my understanding of javascript but any help in correcting my logic would be most appreciative. my pen can be found here: 

 

Thanks again

See the Pen xOmwjP?editors=1111 by w9914420 (@w9914420) on CodePen

[OSUblake]

Make an array of objects, and reference your function that way.

See the Pen zBXraO?editors=0010 by osublake (@osublake) on CodePen

[JoePro]

Hi OSUblake

 

Many thanks for this, the only thing that I have noticed in your example is that that whilst you can play each tween continuously forwards or backwards. The issue that I get is that if i click forward once and then backwards once it will go forwards instead of backwards.

[JoePro]

Hi OSUblake,

 

been playing with your pen today, I have managed to add to your solution, I think the code is quite flexible now, tell me what you think.

 

See the Pen gryNEo by w9914420 (@w9914420) on CodePen

[Jonathan]

I know i am late to the game but here is another way. This does generate a timeline based off of a javascript object.

 

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

 

But Blakes is a better way!

[JoePro]

many thanks jonathan

[OSUblake]

Hi OSUblake

 

Many thanks for this, the only thing that I have noticed in your example is that that whilst you can play each tween continuously forwards or backwards. The issue that I get is that if i click forward once and then backwards once it will go forwards instead of backwards.

 

Oops. Noob mistake. index++ and index-- should be ++index and --index. It's fixed now.

See the Pen zBXraO?editors=0010 by osublake (@osublake) on CodePen

[JoePro]

Hi OSUblake,

 

Thanks for the update

 

regards

 

iProov