Jump to content

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

How to correctly reverse a child timeline inside a parent one?

Go to solution Solved by OSUblake,

Recommended Posts

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

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 
   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

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

  • Solution

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.



So you wouldn't add the child to the parent. Just the tweenTo.


const child = gsap.timeline({ paused: true })





  • Like 1
Link to comment
Share on other sites

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), '>');


  • Like 1
Link to comment
Share on other sites

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(). 

  • Like 2
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.