Jump to content
Search Community

SVG Path animation slowly creeps away

RRorg test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

post-37918-0-98584800-1439628417_thumb.png

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

Link to comment
Share on other sites

  • Solution

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

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.
×
×
  • Create New...