Is possible add new tweens to a TimelineMax and reorder another on the fly

[Tufik Chediak]

Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically).

 

Example:

 

timeLine = new TimelineMax();

timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1");

timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2");

 

After in need add a new TweenMax after box1 but i need that box2 run after the box3

 

tween = TweenMax.to(".box3", 1, {left:100});

timeLine.add(tween, "box1");

 

timeLine.play();

 

RESULT: Currently the box2 and the box3 run at the same time.

 

Another test, was get  'box2'  tween and use UpdateTo() to add delay:1 but UpdateTo dont work with delays.

 

Some idea?

Edited September 7, 2013 by Tufik Chediak

[Rodrigo]

Hi and welcome to the forums.

 

The thing is that once you've created the timeline you can add more tweens and timelines to it, but the original structure can't be changed. In your case the original structure is two tweens and two labels, the first tween goes from 0 to 1 second and the second from 1 second to 2 seconds. Then you add another tween at a label that is at the 1 second position but what it doesn't do is push the tween in the 1 second mark to the end of the timeline, so as a result you have two concurrent tweens.

 

As you already find out the update method works only to the vars of the particular tween and is better suited for altering individual instances.

 

What you could do is clear the timeline and then populate it again with the sequence you want. The cool thing about the clear method is that you can keep the labels in the timeline, that'll give you the possibility to add the same tweens in their original position while adding the new ones.

 

You can see a simple codepen here:

See the Pen nteyv by rhernando (@rhernando) on CodePen

 

Now if you want to create a sort of seamless update you'll have to use the time() method in order to get the current playing time of the timeline and store it in a variable, then clear the timeline, add the new sequence and finally play it starting at the stored time at the beginning.

 

Best,

Rodrigo.

[tufik2]

Hello, thank you for your answer.

 

i have created a method that replace the old TimeLine for the New TimeLine with the new tween and move the next tweens to the new position but i have a new problem. I use offsetOrLabel param too and i don't know how get a array with this related values. When i create the new TimeLine the offsetOrLabel param lost.

 

Is possible get the offsetOrLabel info related with the specific tween?

 

Another question when i create a new timeline, add new  tweens objects and labels, I can see (firebug: console.log(timelineMax)), a object with all labels added, Would be good have anothers object with all real data of tweens including offsets data, etc. Similar to labels 

 

Something so:

real_tweens = [{tween:Object, offsetOrLabel :"=-10", etc}, {tween:Object, offsetOrLabel :"labe1", etc}]

 

------

 

In resume i'm creating a page with Ajax load content. All with TweenMax transitions (similar to parallax effect). When i be (example) "Works area", i need to load a work description and add this new HTML content to the time line just after the "work" label and move the next transitions example 2 secons after. The only problem that i have to resolve is get all data "offsetsOrLabel " too, and do a correct replica of the old timeLine.

[Rodrigo]

Hi,

 

What you could use is getLabelsArray() method, to get the labels and times of the timeline. You can use that info in order to see where the labels are and where to add them when you create the timeline again.

 

But as soon as create a new timeline you'll have to add the labels in it again, while using the clear method the labels remain in the timeline at the positions where they were originally, with that you can add new tweens at those specific times without worrying about the sequence sync. Also, as you can see in the codepen, in the original timeline you can have as many labels as you can but not necessarily put tween instances in it, so later you can clear the timeline and add tweens in any given label position.

 

Best,

Rodrigo.