Jump to content
Search Community

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

Tufik Chediak test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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




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");
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 by Tufik Chediak
  • Like 1
Link to comment
Share on other sites

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.




  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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.




Link to comment
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.
  • Create New...