Chaining GSAP Animations: Repeat → Finish → Reverse (Inconsistent on PointerLeave)

[fonveton]

Hi,

I’ve set up a GSAP animation flow that works like this:

1. On pointerenter, Animation A plays once.

2. When A completes, Animation B starts with repeat: -1.

3. On pointerleave, I:

   • Set repeat(0) on Animation B, so it finishes its current loop once.

   • After B ends, I call reverse() on Animation A.

This mostly works — but the timing isn’t consistent.
If the user hovers quickly in and out, or leaves after a while, sometimes:

• B cuts off early

• A reverses too soon

• Or the transitions feel jumpy

How can I make sure that:

• B finishes its last loop smoothly after setting repeat(0),

• and only after that, A reliably reverses?

Any best practices for syncing these kinds of chained animations?

Thanks in advance!

See the Pen dPoeJNz by manidar (@manidar) on CodePen.

[Rodrigo]

Hi,

 

I don't have time to go through all the setup in your demo, but this would be my approach for something like this:

See the Pen wBajxLj by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!