Artleks Posted October 12, 2021 Share Posted October 12, 2021 Let's say I have a parent timeline from where I control some children timelines. During the animation proccess I want to reverse one of the children. The thing is that the options I came up with, does not really work as expected. How do one reverse a child correctly during the main timeline and then restart the parent successfully? Here is the sample 'parent - child': See the Pen gOxbZOW?editors=1011 by Artleks (@Artleks) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 12, 2021 Share Posted October 12, 2021 Hey it really helps when you provide a demo of your code, it also makes it a lot easier to jump in the code and tweak, this way it makes it more likely that more people will help you. Right now we first have to copy your code install GSAP in a Codepen and get something working before we can help you. But I would crate a function of your timeline and return the timeline either normally or in reverse based on some logic you provide function child(someLogic){ const tl = gsap.timeline(); // your animation if(someLogic){ return tl.reverse() } else{ return tl } } then you can use `parent.add(child(true))` or `parent.add(child(false))` Link to comment Share on other sites More sharing options...
Artleks Posted October 12, 2021 Author Share Posted October 12, 2021 The codepen sample is supplied above. The option for a function creating separate timelines for forward and reverse does not work. Feel free to edit. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 12, 2021 Solution Share Posted October 12, 2021 Welcome to the forums @Artleks Generally, it's not a good idea to try and reverse something added to a timeline. I think you may have been on the right track with tweenTo, just the incorrect syntax. https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() So you wouldn't add the child to the parent. Just the tweenTo. const child = gsap.timeline({ paused: true }) parent.add(child.tweenTo(1)) ... parent.add(child.tweenTo(0)) 1 Link to comment Share on other sites More sharing options...
Artleks Posted October 12, 2021 Author Share Posted October 12, 2021 Hi @OSUblake. Thanks for the hint! Implementing it like the following works good! parent.add(child.tweenTo(child.duration()), 0); parent.add(child.tweenFromTo(child.duration(), 0), '>'); 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 12, 2021 Share Posted October 12, 2021 Just for the record, if you wanted to reverse() a child animation and have it appear smooth/seamless, that requires that the startTime get adjusted accordingly and that means you must set smoothChildTiming: true on the parent. The playhead of child animations are always in sync with the parent, so imagine the playhead reaching the END of the child and then if you reverse() without adjusting that child's startTime, that means the playhead would now be at the START of that tween, thus the animation would instantly jump. To make it smooth, it would literally need to pick up that tween, flip it, and make its startTime wherever the playhead currently is on the parent. That's what smoothChildTiming: true is for. See the Pen ExvjYvm?editors=0010 by GreenSock (@GreenSock) on CodePen (click to toggle the direction) But the way you're trying to do the reversing isn't a true reverse - it looks like you're trying to create separate tweens that operate on the playhead of a single one, thus the tweenTo() or tweenFromTo() is a great option. I just wanted to clarify the behavior with reverse(). 2 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