jeanbmar Posted November 16, 2021 Share Posted November 16, 2021 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 More sharing options...
Cassie Posted November 16, 2021 Share Posted November 16, 2021 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 More sharing options...
jeanbmar Posted November 16, 2021 Author Share Posted November 16, 2021 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 More sharing options...
Cassie Posted November 16, 2021 Share Posted November 16, 2021 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. 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted November 16, 2021 Solution Share Posted November 16, 2021 You would need to use smoothChildTiming like this... const tl = gsap.timeline({ smoothChildTiming: true }); tl.add(nested); tl.call(() => nested.reverse()); 3 Link to comment Share on other sites More sharing options...
jeanbmar Posted November 16, 2021 Author Share Posted November 16, 2021 Awesome, thanks to both of you 💯 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now