Animation jumping on pause and resume.

[teabag]

I've created this rotating text items animation using gsap, which is working fine.

 

Now I want to be able to pause the animation when I hover with my mouse over the text items, and continue with the animation once the mouse leaves the area. 

 

This more or less works, however in some cases when the animation is resumed, it sort of jumps forward quickly to the end.

 

To reproduce the behavior hover over the text item with your mouse and let it sit there for a few seconds, then move the mouse out. A lot of times this causes the animation to sort of jump forward instead of continuing on smoothly.

 

See the Pen OJVJLZP by teabagD (@teabagD) on CodePen

[ZachSaucier]

Hey teabag. Welcome to the GreenSock forums!

 

I'm not sure why that's happening. My guess is that it's related to the prepending somehow as taking out your onComplete function causes it to behave normally. Maybe @GreenSock has a better guess at what's happening under the hood.

 

Regardless, editing the DOM over and over again like you're doing is pretty performance intensive. I'd recommend using GSAP's modifiers to prevent the need of changing the DOM. It also fixes the issue:

See the Pen BaNayQV?editors=0010 by GreenSock (@GreenSock) on CodePen

[teabag]

Great! Thanks a lot for the solution ZachSaucier.

[GreenSock]

There was indeed an issue that could cause a callback to fire prematurely in certain rare scenario (when there are no active tweens for a while and GSAP goes to "sleep" and then an animation is unpaused and wakes the engine). That should be resolved in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js