Поместите временную шкалу A на временные шкалы B и C (GSAP)

Короткий

Используйте функции для создания временных шкал:

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

var moveRight = createMoveRightTl();

Обновленный JSFiddle

Длинный

Как сказал Карл Шуф на форуме GSAP

Основная проблема здесь заключается в том, что вы не можете разместить временную шкалу или анимацию движения в нескольких родителях.

Анимация (анимация или временная шкала) может иметь только одного родителя.

Из документов:

Каждая анимация помещается на временную шкалу (по умолчанию корневая временная шкала) и может иметь только одного родителя. Экземпляр не может существовать одновременно на нескольких временных шкалах.

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

В вашем случае это звучит так, как будто вместо предварительного создания всех временных шкал вы должны просто создавать функции, которые генерируют временные шкалы, а затем вызывать эти функции, когда вам нужен определенный эффект.

По сути, это конфликт перезаписи, в то время как первые две временные шкалы могут сосуществовать без каких-либо проблем, но с того момента, как вы добавляете их на третью временную шкалу, они подчиняются указателю воспроизведения этой временной шкалы, а также являются их целями. Кроме того, поскольку у вас есть две родительские временные шкалы, родитель, созданный в конце «moveLeftRight», в этом случае перезаписывает все другие временные шкалы, учитывая тот факт, что все временные шкалы влияют на одну и ту же цель и одно и то же свойство «X». Если вы используете это:

// 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());*/

Код moveRightLeft работает, но вы получаете странные результаты с отдельными кнопками.

Решение состоит в том, чтобы создать основные временные шкалы для событий кнопок, чтобы избежать таких конфликтов, создав все временные шкалы как глобальные переменные:

// 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);
}

Другой вариант — использовать только одну родительскую временную шкалу и использовать play(0) и reverse(0), например:

// 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);
}

Я обновил вашу скрипку: http://jsfiddle.net/Zde5U/8/

Проблема в том, что если вы создадите две временные шкалы, а затем добавите эти временные шкалы в другую, какая временная шкала имеет контроль? Было бы довольно сложно, если бы вложенная временная шкала могла управлять точкой воспроизведения своей родительской временной шкалы, что, если у родителя есть 4 вложенные временные шкалы, и каждая из них пытается контролировать точку воспроизведения родителя?, это хаос анимации.

Родриго.