How to clone/copy timeline?

[panych]

Is there a way to clone timeline, so you'll be able to change it without causing original timeline?
 

// Original timeline
var moveRight = new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});

// Child timeline, wich works like original
var moveFarRight = moveRight.clone();
moveFarRight.to(el, 1, {x: 200});

moveRight.pause(); 
// moveFarRight didn't paused, so it will play

 
It's a little bit looks like classes and inheritence in OOP: basic timeline, child timeline.

[Rodrigo]

Hi,

 

The only way I know to do that is using the updateTo() method, but since it works only on TweenMax instances and the timelines convenience methods (to, from, fromTo) return TweenLite instances, you need to use the add method to include TweenMax instances in the timeline, then you can update that particular instance, like this:

var moveRight = new TimelineMax(),
    nestedTween = TweenMax..fromTo(el, 1, {x:0},{x:100});

moveRight.add( nestedTween );

//now we update the tween instance inside the timeline
nestedTween.updateTo({x:200}, true);

Like that you avoid creating two different timelines.

 

Another chance is to clear the timeline or remove the particular instance you want to update and create a new instance with the updated values, but that might be a little more cumbersome, specially if you have more instances in the timeline.

 

Rodrigo.

[Carl]

Please see your other thread as I feel these issues are probably closely related:

http://forums.greensock.com/topic/8718-put-timeline-a-in-timelines-b-and-c/

[panych]

I've found a solution: use some kind of "Tween fabric"

function getMoveRight() {
    return new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});
}

// Original timeline
var moveRight = getMoveRight();

// Child timeline, wich works like original
var moveFarRight = getMoveRight();
moveFarRight.to(el, 1, {x: 200});

moveRight.pause(); 
// moveFarRight didn't paused, so it will play

It works well for me and I've already used this trick before, but forgot about it)

 

Thanks Rodrigo and all GSAP team.