SVG Path animation slowly creeps away

[RRorg]

I'm repeatedly animating an SVG path with TweenMax.to:

function wink() {
		TweenMax.to($righthand, 0.4, {
				x: 60,
				y: -60,
				rotation: -120,
				ease: Power1.easeInOut,
				transformOrigin: 'left bottom'
		});
		TweenMax.to($righthand, 0.15, {
				rotation: -90,
				yoyo: true,
				ease: Power1.easeInOut,
				repeat: 5,
				delay: 0.4,
				transformOrigin: 'left top'
		});
		TweenMax.to($righthand, 0.4, {
				x: 0,
				y: 0,
				rotation: 0,
				delay: 1.25,
				ease: Power1.easeInOut,
				transformOrigin: 'left bottom',
				onComplete: function() {
						$righthand.css('transform', '');
						setTimeout(wink, 5000 + Math.random() * 10000);
				}
		});
}

even resetting the transform property in the onComplete function. As long as the window is open, everything is fine. Now, using the latest Chrome on Mac OS X, if you keep the animation running in a background tab for a few minutes, the path slowly starts creeping away - see the attached screenshot, the hand of the animal has somehow transformed into an obscene dongus.

While funny, I'd love to know if there is a fix for this.

Thank you!

See the Pen left by rrorg (@rrorg) on CodePen.

[Diaco]

Hi RRorg 

 

unfortunately , i can't test your demo on Mac OS right now , but pls try use TweenMax/TweenLite.delayedCall() instead of setTimeout , and clearProps instead of .css('transform', '');

 

like this :

TweenLite.set(element, {clearProps:"transform"}); // or  {clearProps:"all"})
TweenLite.delayedCall( 5 , myFunction ); 

[RRorg]

Thank you! No more Donger-Raising for me 

[OSUblake]

That obscene dongus had me rolling 

[Jonathan]

You could also pause() / resume() your animation depending if the browser tab / window gain and lose focus.

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen.

 

The above example uses the HTML5 Visibility API to detect the focus of browser tabs and browser windows. So when you leave the browser tab or window you can pause() your animation. Then when you return to the browser tab or window, you can resume() the animation.

 

I hope you find it useful