Jump to content
GreenSock

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

useRAF and lagSmoothing on gsap object

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

  • 7 months later...

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

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

  • Like 2
Link to comment
Share on other sites

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

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? 

  • Like 1
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.
×