FactoryWW Posted August 21, 2020 Share Posted August 21, 2020 Hello everyone, I searched the forum and could not find it. Can I use these methods useRAF() and lagSmoothing() on a gsap object. I saw use-cases on tweens and timelines that developers use useRAF() and lagSmoothing(),but i need on gasp object. I am new to GSAP animations, any help is appreciated. The problem is next: When i switch tab my animation stops, and i don't want that. I want to run without drop of frames in that tab. I have created my animation over gsap object like this : this.spinAnimation = gsap.to(".spinner", { rotation: "+=" + this.animationSettings.normalVelocity * 1000, duration: 1000, repeat: -1, ease: "none", }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Hey Factory WW and welcome. Thanks for supporting GreenSock by being a Club GreenSock member! I'm not sure i'm understanding your issue. Why do you need to turn lag smoothing off or set use RAF to false? You can turn off lag smoothing by using gsap.ticker.lagSmoothing(false); but this is not recommended. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 21, 2020 Share Posted August 21, 2020 9 hours ago, FactoryWW said: When i switch tab my animation stops, and i don't want that. I want to run without drop of frames in that tab. That's generally considered a big "no-no" in the industry, and quite rude to the end user because it needlessly eats up CPU resources and drains battery even though the user can't see anything happening. Also, browsers throttle back their requestAnimationFrame and setTimeout() calls when a tab is inactive - it's not something GSAP does. I cannot imagine a scenario where it would be a good idea to force things to update 60 times per second while a tab is inactive. Like Zach, I'm very curious about WHY you want to do this. I'd strongly recommend against it. 2 Link to comment Share on other sites More sharing options...
FactoryWW Posted August 26, 2020 Author Share Posted August 26, 2020 ZachSaucier and GreenSock thank you. You are right it's bad idea to force inactive tab to update 60fps. I changed my logic so now based on some parameters I calculate where the animation should be when user returns to the page. Thank you for all your time. Link to comment Share on other sites More sharing options...
ligr Posted March 30, 2021 Share Posted March 30, 2021 I implemented this suggestion here in version 2 . Quote A fancy solution would be to write your own script so that while the tab is active, you have lagSmoothing() enabled and the ticker uses requestAnimationFrame, but then when the user switches tabs, you turn off lagSmoothing() This seems to not working using gsap.ticker.lastSmoothing(0) or // or false or 0 ,0. Is this not supported in version 3? Link to comment Share on other sites More sharing options...
GreenSock Posted March 30, 2021 Share Posted March 30, 2021 2 hours ago, ligr said: This seems to not working using gsap.ticker.lastSmoothing(0) or // or false or 0 ,0. Is this not supported in version 3? Can you please provide a minimal demo? I'm not quite sure what you're trying or what you think is broken exactly. It'd be super helpful if we could see what you're doing. There is no useRAF() method on the ticker in version 3, and that was very intentional. See the discussion here: https://github.com/greensock/GSAP/issues/437 If you want to try to force things to update while the browser tab is hidden (and keep in mind browsers will only allow it at maybe 2fps), you can use this helper function: https://greensock.com/docs/v3/HelperFunctions#hidden 2 Link to comment Share on other sites More sharing options...
ligr Posted April 1, 2021 Share Posted April 1, 2021 Thanks! That hidden helper seems to have done the trick. Am I wrong in thinking the below modifications also mean you get the benefits of lag smoothing when the page is visible? function tickGSAPWhileHidden(value) { if (value === false) { document.removeEventListener("visibilitychange", tickGSAPWhileHidden.fn); return clearInterval(tickGSAPWhileHidden.id); } const onChange = () => { clearInterval(tickGSAPWhileHidden.id); document.hidden && (tickGSAPWhileHidden.id = setInterval(() => { gsap.ticker.lagSmoothing(0) gsap.ticker.tick() }, 100)); !document.hidden && gsap.ticker.lagSmoothing(400, 40) }; document.addEventListener("visibilitychange", onChange); tickGSAPWhileHidden.fn = onChange; onChange(); // in case the document is currently hidden. } Link to comment Share on other sites More sharing options...
GreenSock Posted April 1, 2021 Share Posted April 1, 2021 I'm not sure why you'd want to continually set lagSmoothing(0) in your interval. I'd do it like this: function tickGSAPWhileHidden(value) { if (value === false) { document.removeEventListener("visibilitychange", tickGSAPWhileHidden.fn); return clearInterval(tickGSAPWhileHidden.id); } const onChange = () => { clearInterval(tickGSAPWhileHidden.id); if (document.hidden) { gsap.ticker.lagSmoothing(0); // keep the time moving forward (don't adjust for lag) tickGSAPWhileHidden.id = setInterval(gsap.ticker.tick, 500); } else { gsap.ticker.lagSmoothing(500, 33); // restore lag smoothing } }; document.addEventListener("visibilitychange", onChange); tickGSAPWhileHidden.fn = onChange; onChange(); // in case the document is currently hidden. } Does that work for you? 1 Link to comment Share on other sites More sharing options...
ligr Posted April 9, 2021 Share Posted April 9, 2021 Yep, thank you. 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