Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
panych

How to clone/copy timeline?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×