Jump to content
GreenSock

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

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

Go to solution Solved by Carl,

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 post
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 post
Share on other sites

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 post
Share on other sites

Excellent! You guys are too good. 

 

I have been making prototypes and recommending using GSAP + Framer.js in the studio / agency here.

So far the synergy between 2 libraries are awesome. 

Link to post
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 post
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.

×