Guy Kedar Posted December 21, 2020 Share Posted December 21, 2020 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 More sharing options...
ZachSaucier Posted December 21, 2020 Share Posted December 21, 2020 Hey Guy. This is related to how requestAnimationFrame works (which is what GSAP uses under the hood by default). You can read more about the situation here: They're old posts using the old syntax but the same principles apply. Let us know if you have any more questions! 1 Link to comment Share on other sites More sharing options...
Guy Kedar Posted December 21, 2020 Author Share Posted December 21, 2020 I tried all of them in my FLA... Nothing seem to work for me... I put console.log() to make sure If someone can show me in FLA solution I will be so grateful... I need this for my Games site... timer pocus blur test.fla Link to comment Share on other sites More sharing options...
GreenSock Posted December 22, 2020 Share Posted December 22, 2020 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! 2 Link to comment Share on other sites More sharing options...
Guy Kedar Posted December 22, 2020 Author Share Posted December 22, 2020 Thanks! Working now! I didn't need it for the rotation of the animation... i needed the counter animation. thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now