Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Path animation slowly creeps away

Recommended Posts

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 aOxQMj by rrorg (@rrorg) on CodePen

Link to comment
Share on other sites

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 ); 
  • Like 3
Link to comment
Share on other sites

Thank you! No more Donger-Raising for me  :-P

Link to comment
Share on other sites

That obscene dongus had me rolling  :lol:

  • Like 1
Link to comment
Share on other sites

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 :)

  • Like 2
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.