Put timeline A in timelines B and C

[panych 2 Likes (Newbie)]

How can you put timeline into two different timelines and then have ability to play it separate as well as play "container" timelines?

 

To clear what I meaning, here is an example of 4 timelines: 2 simple, 2 combined (also interactive example available on jsFiddle):

var moveRight = new TimelineMax({paused: true})
.fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
.fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused: true})
.add(moveRight.play()) // call `play` because timeline paused 
.add(moveLeft.play());

var moveLeftRight = new TimelineMax({paused: true})
.add(moveLeft.play())
.add(moveRight.play());

In this example, when we'll try to play each timeline, only last one (moveLeftRight) will work. Why is it so? Can we somehow play any timeline?

 

This question also posted on Stackoverflow

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Basically this is a overwrite conflict, while the first two timeline's can coexist without any trouble, but from the moment you add them to a third timeline they are subject to that timelne's playhead  and so are their targets. Also since you have two parent timelines the parent that's created at the end "moveLeftRight" in this case, overwrites all other timelines considering the fact that all timelines affect the same target and the same property "X". If you use this:

// Declare timelines
var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused: true})
    .add(moveRight.play())
    .add(moveLeft.play());

/*var moveLeftRight = new TimelineMax({paused: true})
    .add(moveLeft.play())
    .add(moveRight.play());*/

The moveRightLeft code works but you get odd results with the individual buttons.

 

A solution is to create the master timelines on the button events, like that you avoid such conflicts by creating all the timelines as global variables:

// Declare timelines
var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
    var moveRightLeft = new TimelineMax()
    .add(moveRight)
    .add(moveLeft);
}

window.moveLeftRight = function()
{
   var moveLeftRight = new TimelineMax()
    .add(moveLeft)
    .add(moveRight);
}

Another choice is use just one parent timeline and use play(0) and reverse(0), like this:

// Declare timelines
var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused:true})
    .add(moveRight)
    .add(moveLeft);

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
   moveRightLeft.play(0);
}

window.moveLeftRight = function()
{
    moveRightLeft.reverse(0);
}

I've updated your fiddle:

http://jsfiddle.net/Zde5U/8/

 

The issue is that if you create two timelines and then add those timelines into another one, which timeline has the control?, it would be quite a mess if a nested timeline could control the playhead of it's parent  timeline, what if the parent has 4 nested timelines and each one of those try to control the parent's playhead?, it's an animation chaos.

 

Rodrigo.

[Carl 9,066 Likes (Superhero)]

The core issue here is that you can not place any timeline or tween in multiple parents.

An Animation (tween or timeline) can only have one parent.

 

From the docs:

Every animation is placed onto a timeline (the root timeline by default) and can only have one parent. An instance cannot exist in multiple timelines at once.

 

http://api.greensock.com/js/com/greensock/core/Animation.html#timeline

 

In your case it sounds like instead of pre-creating all the timelines, you should just create functions that generate timelines and then you call those functions when you need a particular effect.

[panych 2 Likes (Newbie)]

Thanks everybody.

 

Yes Carl, you're absolutely right, functions is everything for us)

 

Thanks again, hopefully this topic will be helpful to someone like me.

[panych 2 Likes (Newbie)]

Related topic: http://forums.greensock.com/topic/8717-how-to-clonecopy-timeline

[GreenSock 8,117 Likes (Superhero)]

[i know this is solved, but I wanted to post this in case it helps someone else who is searching the forums...]

 

Carl is correct - any tween or timeline can only have ONE parent timeline, but there's also a tricky way you can accomplish something like placing a timeline into multiple other timeline. Just pause() your original timeline, and then place tweens of that timeline's time into any other timeline. For example:

var tl = new TimelineMax();
tl.to(...); //populate it however you want...
tl.pause();

var master1 = new TimelineMax();
var master2 = new TimelineMax();

master1.add( tl.tweenFromTo(0, tl.duration()) );
master2.add( tl.tweenFromTo(0, tl.duration()) );

Remember, the TimelineMax's tweenFromTo() returns a TweenLite instance. It's just a slick way to move the timleine's playhead using a tween. Move it from any spot to any other spot (time, label, whatever). 

 

Enjoy!

...