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.