useRAF and lagSmoothing on gsap object

[FactoryWW 0 Likes (Newbie)]

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",

});

[ZachSaucier 7,130 Likes (Superhero)]

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.

[GreenSock 18,251 Likes (Superhero)]

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. 

[FactoryWW 0 Likes (Newbie)]

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.

[ligr 0 Likes (Newbie)]

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?

[GreenSock 18,251 Likes (Superhero)]

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

[ligr 0 Likes (Newbie)]

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

 

[GreenSock 18,251 Likes (Superhero)]

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? 

[ligr 0 Likes (Newbie)]

Yep, thank you.