Jump to content
Search Community

Remove a nested timeline from a parent timeline and reverse() the parent timeline.

venn test
Moderator Tag

Go to solution Solved by Carl,

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

Hi team,

 

I have a problem with my code that I can't solve.

So what I have is a master timeline that have 3 nested timelines: getSpinTimeline(), getRotateTimeline(), getPinTimeline()

var mtl = new TimelineMax();

mtl.add(getSpinTimeline())
   .add(getRotateTimeline())
   .add(getPinTimeline());

mtl.timeScale(2.3);

After the animation has ended, I hit on a button I would like to reverse() the animation.

 

It works fine if I do mtl.reverse();

 

But what I am trying to achieve here is to remove getPinTimeline() and reverse only getRotateTimeline() and getSpinTimeline().

 

I tried the following but failed:

mtl.remove(getPinTimeline()).reverse()

mtl.seek(getPinTimeline().totalDuration()).reverse()

I have also tried creating a duplicate timeline but failed:

var mtl2 = new TimelineMax();

mtl2.add(getSpinTimeline())
    .add(getRotateTimeline())

mtl2.timeScale(2.3).reverse();

Any idea how I am able to fix this?

 

Thanks,

Venn.

Link to comment
Share on other sites

Hi venn  :)

 

pls try like this : 

var MasterTl = new TimelineMax();

var redMove = new TimelineMax();
var redRotate = new TimelineMax();
var blueMove = new TimelineMax();

redMove.to('.red',1,{x:200});
redRotate.to('.red',1,{rotation:180});
blueMove.to('.blue',1,{x:200});

MasterTl.add(redMove);
MasterTl.add(redRotate);
MasterTl.add(blueMove);

document.querySelector('.blue').addEventListener('click',function(){
    MasterTl.remove(blueMove).reverse()
});

See the Pen YwxZmO by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

  • Solution

Excellent demo, Diaco. Thanks for building that.

 

Venn, Diaco's solution is the best. If you need to remove a child from a timeline it is best to maintain a reference to that timeline which Diaco does by declaring his timelines outside of any functions.

 

In your case it seems you are using functions to create timelines (which is great) but you lose any way reference those timelines when you place the returned timeline into the parent.

 

So if you want to keep your functions that return timelines, you can implement Diaco's technique like this:

 

var toBeRemoved = getBlueMove();

MasterTl.add(getRedMove());
MasterTl.add(getRedRotate());
MasterTl.add(toBeRemoved);

document.querySelector('.blue').addEventListener('click',function(){  
   MasterTl.remove(toBeRemoved).reverse()
});

http://codepen.io/GreenSock/pen/JGyJZo?editors=001

 

 

Another approach which isn't as good or flexible is to just remove a child from the timeline based on its position. So in the case where you don't have a name or reference for the timeline you can say "remove the 3rd child" like:

 

MasterTl.add(getRedMove());
MasterTl.add(getRedRotate());
MasterTl.add(getBlueMove());

document.querySelector('.blue').addEventListener('click',function(){
  var removed = MasterTl.getChildren(false)[2];//finds 3rd timeline
  console.log(removed)
MasterTl.remove(removed).reverse()
});

http://codepen.io/GreenSock/pen/gPxRvW?editors=001

 

Hopefully this helps. In the future please consider providing a CodePen demo with your question as it can really help us explore the possibilities.

  • Like 3
Link to comment
Share on other sites

  • 2 years later...

What if I dont have a main timeline and have only specific timeline (which was nested to the main), Is there a way to de-parent it (to play it alone)?

Im creating multiple "static" effect timelines, but the main is "dynamic"

 

....

 

oh, i found solution for myself. to reuse a prepared, paused timeline which was nested, the only thing to do is to re-nest it in a newly created timeline..

 

 

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.
×
×
  • Create New...