Jump to content
GreenSock

jeanbmar

Reversing a nested timeline in parent timeline

Go to solution Solved by OSUblake,

Recommended Posts

Hey there,

 

I have a parent timeline which contains several nested timelines.

I would like to reverse some of the nested timelines manually. But reversing a nested timeline with a delayed call does nothing.

Why that or what am I doing wrong?

 

// https://codepen.io/jeanbmar/pen/QWMJJRW
const nested = gsap.timeline().to(props, { color: 'black', duration: 5 });
const tl = gsap.timeline();
tl.add(nested);
// tl.add(/* ... */) // doing more stuff here in real life
tl.call(nested.reverse); // this does nothing

Thank you for your help!

 

See the Pen QWMJJRW by jeanbmar (@jeanbmar) on CodePen

Link to comment
Share on other sites

Hey @jeanbmar


I *think* that the playhead was still at the beginning, so when you reversed it nothing was happening.
 

//reverses playback from wherever the playhead currently is:
tl.reverse();

//reverses playback from the very END of the animation:
tl.reverse(0);


reverse(0) seems to work

See the Pen wvqQNod?editors=0011 by GreenSock (@GreenSock) on CodePen



 

Link to comment
Share on other sites

Hey @Cassie, thank you for your answer.

 

Your solution calls reverse immediately so the nested timeline will play backward only.

I would like nested to play forward first, then to play backward.

I don't want to use a yoyo because I'll be adding animations between the two plays.

 

I have the feeling that once a timeline is added to a parent, you lose control over its playhead in favor of the parent's one.

Which means what I ask is impossible, unless I create an additional animation to manually implement the reversal on nested.

Link to comment
Share on other sites

Oh ok I think I get you.

If I'm understanding correctly - Here's an approach that works.


See the Pen eYEbOQX?editors=1010 by GreenSock (@GreenSock) on CodePen



Whether it's the best approach or not is probably very questionable - I think it would certainly be worth seeing what @GreenSock thinks about this.
 

  • Like 1
Link to comment
Share on other sites

  • Solution

You would need to use smoothChildTiming like this...

 

const tl = gsap.timeline({
  smoothChildTiming: true
});
tl.add(nested);
tl.call(() => nested.reverse());

 

  • Like 3
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.
×