Jump to content


Two timelines referencing the same tween instances

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

Is it possible to have two timelines referencing the same tween instances? I would like to reset each timeline back to duration 0 (and paused)], then play the appropriate timeline. It seems as though the first timeline to get played 'owns' the reference to the tween and the other timeline will simply not play what they have common.

        var tw1 = TweenLite.fromTo(dom('#challengerA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-500px'}}, {css: {autoAlpha: 1, marginLeft: '-50px'}});
        var tw2 = TweenLite.fromTo(dom('#challengerB'), 0.4, {css: {autoAlpha: 0, right: '-400px'}}, {css: {autoAlpha: 1, right: '-50px'}});
        var tw3 = TweenLite.fromTo(dom('#chall_mascotA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}});
        var tw4 = TweenLite.fromTo(dom('#chall_mascotB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}});
        var tw5 = TweenLite.fromTo(dom('#chall_schoolA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}});
        var tw6 = TweenLite.fromTo(dom('#chall_schoolB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}});
        var tw7 = TweenLite.fromTo([dom('#chall_percentageCellA'),dom('#chall_percentageCellB')], 0.3, {autoAlpha: 0}, {autoAlpha: 1});

        _view_tl_0.add(tw1, 0);
        _view_tl_0.add(tw2, 0);
        _view_tl_0.add(tw3, .2);
        _view_tl_0.add(tw4, .2);
        _view_tl_0.add(tw5, .3);
        _view_tl_0.add(tw6, .3);
        _view_tl_0.add(tw7, .4);
//        _view_tl_0.add(tw8, .4);

        _view_tl_1.add(tw1, 0);
        _view_tl_1.add(tw2, 0);
        _view_tl_1.add(tw3, .2);
        _view_tl_1.add(tw4, .2);

        switch (_viewStatus){
            case 1:
//                alert('1111'+_viewStatus);
            case 2:
//                alert('2222'+_viewStatus);
            case 0:
//                alert('0000'+_viewStatus);
//                alert('default'+_viewStatus);
Link to comment
Share on other sites



Well as far as I can see this is an overwrite issue. The thing is that you create your tweens and each tween points to a specific element, no conflict there. But when you add your tweens to the timelines the problem begins. In your first timeline nothing is wrong, but as soon as you add to another timeline a tween that has been added to a previous timeline, my guess is that the engine is taking the last command so to speak; I mean is like variable declaring, if you create a variable and set it's value to "house", then later on your code you give it a value "garden" and finally you use it in a function, that function will use the value "garden". I'm assuming that the issue here is the same.


You can see this conflict in the following codepen:

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


The solution I came up with is to use a function to add the tweens to just one timeline, passing to it two different arrays, one with the tweens and another with the times where the tweens should be placed in the timeline. Also the code takes care of clearing the data when is used again and getting the timeline back to it's beginning, you can see it working here:

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


Is not the same code you have but I hope it give's you an idea of how can be used in your case with the switch call, it shouldn't be much different anyway.


If you have more questions just fork the pen and add your own code in order to take a look at it.


Hope this helps,



Link to comment
Share on other sites

Think of tweens and timelines kinda like DOM elements in the sense that they can only have one parent. You can't have the same <div> in two places at once. Same for tweens. Each tween has one parent timeline. If you put a tween in one timeline and then put it into another timeline, it'll get removed from that first one. There are a bunch of reasons for this. If you need an explanation, I can write it up, but I don't want to give more info than is requested :) Better for us both. 


If you want to use a super-secret ninja move, though, you could create a paused tween, and then tween the "time" of that tween using a bunch of other tweens. You'd get the same effect, but you'd be honoring the rules of the system. So those tweens would basically be animating the virtual playhead of that master tween. Mind-bending, right? ;)

  • Like 2
Link to comment
Share on other sites

You took me back to modern physics in my university years. A particle can exist in two different places at the same time, but a tween can't  :)



  • Like 1
Link to comment
Share on other sites

What? A particle in 2 places at the same time? Impossible! (or so I thought) Today I've learned that I should have studied more physics...

Link to comment
Share on other sites

Hi Jamie,


If you or anyone else wishes to know a little more about it you can read this:


Specially the part of the relational interpretation, which ultimately explains it.


Also you can watch this video:





Link to comment
Share on other sites

  • 1 year later...

Hello everyone,


Sorry to interrupt this brilliant conversation, but could the same method be used to add other timelines to the Parent timelines instead of tweens. 


I did this code pen, but it does not seem to work.


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


I just wonder if a similar method could be applied to using timelines instead of tweens.





Link to comment
Share on other sites

Hi bromel :)


pls remove paused:true from tn5.fromTo Tween ( line 17# )

  • Like 2
Link to comment
Share on other sites

Hi Diaco.AW 


many thanks, for correcting me on this.



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.