Two timelines referencing the same tween instances

[vsiege]

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(winnerBanner,.6);
//        _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);

 _view_tl_0.pause(0);_view_tl_1.pause(0);_view_tl_2.pause(0);
        switch (_viewStatus){
            case 1:
//                alert('1111'+_viewStatus);
                _view_tl_1.play(0);
                break;
            case 2:
//                alert('2222'+_viewStatus);
                _view_tl_2.play(0);
                break;
            case 0:
//                alert('0000'+_viewStatus);
                _view_tl_0.play(0);
                break;
            default:
//                alert('default'+_viewStatus);
                _view_tl_0.play(0);
        }

[Rodrigo]

Hi,

 

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,

Cheers,

Rodrigo.

[GreenSock]

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?

[Rodrigo]

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 

 

Cheers,
Rodrigo.

[jamiejefferson]

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...

[Rodrigo]

Hi Jamie,

 

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

http://en.wikipedia.org/wiki/Double-slit_experiment

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

 

Also you can watch this video:

http://www.youtube.com/watch?v=DfPeprQ7oGc

 

Cheers,

Rodrigo.

[Bromel]

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.

 

regards

 

w9914420

[Diaco]

Hi bromel 

 

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

[Bromel]

Hi Diaco.AW 

 

many thanks, for correcting me on this.

 

Awesome!!