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.