Jump to content
Search Community

Animations pause when browser tab is not visible

Guy Kedar test
Moderator Tag

Recommended Posts

Hello,
I'm using GSAP on Animate CC to animate a timer,
but when I switch between browser tabs and switch back to that particular tab animation is running, animation is resuming from where it stops before switching.
So i guess what happens is all the animations got stuck and stopped halfway through when change to another tab...
I'd would like animation continue in background even if i changed to different tab...
How to do it?

I tried window.parent.addEventListener("blur",  clickOutsideCanvas); and put  tl.resume(); but it is not working for me...
Please assist me...
 

timer pocus blur test.fla

Link to comment
Share on other sites

Browsers will not allow JavaScript to run at the "normal" rate when a tab is inactive, but you can simply disable the lagSmoothing feature if you want GSAP to jump ahead when there's lag:

gsap.ticker.lagSmoothing(false);

gsap.ticker.lagSmoothing(false);

Just add that at the top and you should be golden. 

 

Other comments:

  • I'd recommend updating to the latest GSAP version
  • Don't use "var" as a property name because it's a reserved keyword in JavaScript. It may technically work for you, but it looks really, really weird to me and I wouldn't be surprised if that causes problems at some point. 
  • You had syntax issues (an extra "}" at the end)
  • You don't need to use a timeline if you're just doing one tween. 
  • Do not use the "new" keyword with TweenMax.to(). That's a static method. 
    // BAD
    tl = new TweenMax.to(...)
                         
    // BETTER (but old syntax)
    tl = TweenMax.to(...)
    
    // BEST
    tl = gsap.to(...);

     

  • You could simplify your whole function to this: 
    function doThat(){
    	gsap.to(root.green, {
    		duration: 36, 
    		rotation: 360, 
    		ease: "none",
    		onUpdate: function () {
    			root.num_txt.text = Math.ceil(root.green.rotation);
    		}
    	});
    }

I hope that helps!

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