Put timeline A in timelines B and C (GSAP)

Question

How can you put one 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?

Answer 1

Short

Use functions to generate timelines:

function createMoveRightTl() {
    return new TimelineMax({paused: true})
        .fromTo(box, 1, {x: 0}, {x: 300});
}

var moveRight = createMoveRightTl();

Updated JSFiddle

Long

As Carl Shoof said in GSAP forum

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.

Answer 2

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.