How to use useRAF with gsap.timeline()

[paulvancity]

Hello,

 

I want to be able to run animations in the browser when the tab has been switched. 
 

I’m  wondering how to use useRAF with gsap.timeline()

 

Thank you.

 

 

[OSUblake]

What do you mean? You want animations to continue running when you switch tabs?

 

[ZachSaucier]

Hey Paul, welcome to the GreenSock forums.

 

GSAP automatically uses RAF under the hood. If you want to tap into the same RAF cycle as GSAP, use GSAP's ticker. In most cases just using tweens and timelines can animate what you want to animate though.

 

More details about your situation would be helpful.

[paulvancity]

3 hours ago, OSUblake said:

What do you mean? You want animations to continue running when you switch tabs?

Yes. 

[paulvancity]

2 hours ago, ZachSaucier said:

Hey Paul, welcome to the GreenSock forums.

 

GSAP automatically uses RAF under the hood. If you want to tap into the same RAF cycle as GSAP, use GSAP's ticker. In most cases just using tweens and timelines can animate what you want to animate though.

 

More details about your situation would be helpful.

I want to do useRAF(false)

[GreenSock]

Very important question: WHY do you want to do this? If your goal is to have the time progress so that when the tab is re-activated, the animations look like the time has elapsed, you can simply disable lagSmoothing like gsap.ticker.lagSmoothing(false). 

 

If you literally want the animations to continue at 60fps, that's a total waste of resources and frowned upon in the industry because you're eating up users' battery and CPU resources on a tab that's not even visible. 

 

Also keep in mind that most browsers drop requestAnimationFrame and even setTimeout()/setInterval() calls significantly in tabs that are inactive. That's a GOOD thing. 

 

If this hasn't helped, please do tell us the "why" behind your request because I suspect there's a better solution. I'd strongly recommend not forcing all your animations to continue running at full speed in inactive tabs. 

[paulvancity]

1 hour ago, GreenSock said:

Very important question: WHY do you want to do this? If your goal is to have the time progress so that when the tab is re-activated, the animations look like the time has elapsed, you can simply disable lagSmoothing like gsap.ticker.lagSmoothing(false). 

 

If you literally want the animations to continue at 60fps, that's a total waste of resources and frowned upon in the industry because you're eating up users' battery and CPU resources on a tab that's not even visible. 

 

Also keep in mind that most browsers drop requestAnimationFrame and even setTimeout()/setInterval() calls significantly in tabs that are inactive. That's a GOOD thing. 

 

If this hasn't helped, please do tell us the "why" behind your request because I suspect there's a better solution. I'd strongly recommend not forcing all your animations to continue running at full speed in inactive tabs

Awesome thank you. I want to do this because I don’t want all my animations backing up when they switch back to the tab, it’s a game with a series of icons coming out every few seconds, and when i switch back, it shows all the icons together and it just looks ugly. 

[ZachSaucier]

2 minutes ago, paulvancity said:

it’s a game with a series of icons coming out every few seconds, and when i switch back, it shows all the icons together and it just looks ugly. 

Why not throttle your game to not keep spawning icons every few seconds when the tab isn't visible?

[paulvancity]

Hi guys,

 

just wondering how I can implement this. Here is my code

 

Would I just do gsap.timeline().ticker.lagSmoothing(false) ?

 

        var tl = gsap.timeline();

        tl.to('#'+xp_el, {top:"-=25", duration: 1.5, ease:"Power4.easeOut"}).

        to('#'+xp_el, {opacity:0});

[GreenSock]

No, that code is incorrect. I already provided the code in my previous post: 

gsap.ticker.lagSmoothing(false)

By the way, you could save yourself some typing by using the shorter string-based ease syntax. The .easeOut is the default anyway, so...

// old/long
ease:"Power4.easeOut"

// new/short
ease:"power4"

Happy tweening!

[OSUblake]

Something like this.

 

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        gsap.ticker.lagSmoothing(false);
    } else {
        gsap.ticker.lagSmoothing(500, 33);
    }
});

 

[paulvancity]

13 hours ago, ZachSaucier said:

Why not throttle your game to not keep spawning icons every few seconds when the tab isn't visible?

Awesome, thank you Zach!

[paulvancity]

Thank you OSUblake!!

[_marta]

Hey guys, just wondering, in case anyone sets lagSmoothing to false will this affect all of their timelines? Is there a way to just set this property to a specific one?

 

[ZachSaucier]

1 hour ago, _marta said:

sets lagSmoothing to false will this affect all of their timelines?

Yes.

 

1 hour ago, _marta said:

Is there a way to just set this property to a specific one?

Not really. To do that you'd need to have two instances of GSAP running which is possible but probably not worth your effort I'd guess.

[GreenSock]

1 hour ago, _marta said:

Is there a way to just set this property to a specific one?

That'd be super weird - one of the big benefits of GSAP is that everything remains perfectly synchronized. If you have lagSmoothing set differently on various timelines, it'd totally throw that off. And then what'd you do if you had one timeline nested inside another and they have different settings? It could get very messy. Sorta like if you had a clock where the "seconds" hand ran at a different rate than the "minutes" hand which ran at a different rate than the "hours" hand. I can't imagine a scenario where you'd want lagSmoothing on one animation but not another - can you explain a scenario where that'd be helpful? 

[_marta]

 

1 minute ago, GreenSock said:

That'd be super weird - one of the big benefits of GSAP is that everything remains perfectly synchronized. If you have lagSmoothing set differently on various timelines, it'd totally throw that off. And then what'd you do if you had one timeline nested inside another and they have different settings? It could get very messy. Sorta like if you had a clock where the "seconds" hand ran at a different rate than the "minutes" hand which ran at a different rate than the "hours" hand. I can't imagine a scenario where you'd want lagSmoothing on one animation but not another - can you explain a scenario where that'd be helpful? 

 

I wanted to have just a specific timeline that would keep running when I switched tabs, on just one specific situation. All of the other timeline would run normally.

[GreenSock]

That's pretty unusual, but I suppose you could do that logic your own separately. Like you'd have to use Date.now() and when the tab becomes unhidden, do some comparisons to see how much time elapsed and set the progress() on your animation accordingly.