onComplete hook won't be triggered while repeat is set to -1

[lykl]

If the stagger sets repeat:-1
onComplete hook won't be triggered so how do I capture the time when each item finishes animation

See the Pen MWBVOgr by lykl (@lykl) on CodePen

[Rodrigo]

Hi @lykl and welcome to the GreenSock forums!

 

That's exactly what should happen. A GSAP instance with a repeat: -1 means that the instance will repeat over and over, endlessly for ever, it's duration is infinite. Something like that never ends, hence never completes, that's exactly what's happening here and why the onComplete callback never gets called.

 

What you can use is an onRepeat and check the instance's iteration value:

const test = { a: 0 };

gsap.to(test, {
  a: 10,
  repeat: -1,
  onRepeat (self) {
    console.log(this.iteration());
  }
});

On the first repeat that value will be 2, because it'll be the second iteration and so forth. You can leverage that as some sort of onComplete.

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[lykl]

10 hours ago, Rodrigo said:

Hi @lykl and welcome to the GreenSock forums!

 

That's exactly what should happen. A GSAP instance with a repeat: -1 means that the instance will repeat over and over, endlessly for ever, it's duration is infinite. Something like that never ends, hence never completes, that's exactly what's happening here and why the onComplete callback never gets called.

 

What you can use is an onRepeat and check the instance's iteration value:

const test = { a: 0 };

gsap.to(test, {
  a: 10,
  repeat: -1,
  onRepeat (self) {
    console.log(this.iteration());
  }
});

On the first repeat that value will be 2, because it'll be the second iteration and so forth. You can leverage that as some sort of onComplete.

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

Thank you for your reply, but here I have set repeat delay, so there will be a delay time in the onRepeat hook, which does not seem to satisfy the requirement

[Rodrigo]

Hi,

 

In that case I think you'll need a different approach to create the loop. Maybe this can help:

See the Pen jOpxyox by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[lykl]

18 hours ago, Rodrigo said:

Hi,

 

In that case I think you'll need a different approach to create the loop. Maybe this can help:

 

 

 

Happy Tweening!

Thank you, but I think immediateRender is not necessary, it doesn't matter if I write or not.