Jump to content


onReverseComplete not working on nested loops

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I'm working on a time visualizer that uses a set of rings to indicate different time increments. There's still a lot of work to do, but I hit a snag I can't figure out. 

If you look at the codepen, you'll see the animation is looping pretty well in the forward direction (just a small glitch) but if you click anywhere, the animation will reverse, then eventually stop. I can't figure out how to keep it going.

As suggested in other threads, I'm using the onReverseComplete to restart the animation, but the function never gets called. I also changed my 0 second animations to 0.0001 seconds with no luck.

Any insights would be greatly appreciated.


See the Pen pbzGrL by misterjworth (@misterjworth) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the demo.


Unfortunately it looks super complicated and I'm having trouble following exactly what you are doing at the moment.

Lots of timelines being passed around and such.


I created a very simple demo that for the moment proves that a nested timeline's onReverseComplete will fire when it's parent is done reversing:



var parent = new TimelineLite({onReverseComplete:reverseComplete,     
                               onComplete:function () {

var child = new TimelineLite({onReverseComplete:reverseComplete, 

parent.to("h1", 1, {x:100})
child.to("h2", 1, {x:100}) 

parent.add(child, 1) // works fine if added at position 0 too.

function reverseComplete (name){
  console.log(name, " onReverseComplete")

see it here: http://codepen.io/GreenSock/pen/ZOzZKL/



oh, after further review it seems the issue for you is just that you were defining your function using var after the timeline code was generated.



var reverseRepeat = function()



function reverseRepeat(tl) {
  console.log("reverse complete"); //Why doesn't this ever get called??
  tl.reverse(0); // sets the playhead at the end of the animation


in the future, the simpler the demo the better. 

  • Like 4
Link to comment
Share on other sites

Thanks Carl! Glad it was just something simple amidst all the other complexity. I really appreciate you taking the time to comb through it.

Link to comment
Share on other sites

You're Welcome ;)

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.