Jump to content
Search Community

ThrowPropsPlugin Tween without RAF on Window blur

paul_ngc test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have the following tween that is called every 60 seconds with a setTimeout:

ThrowPropsPlugin.to( nextItem, {
  throwProps:{
    x:{
      velocity:200,
      min: 0,
      max: 0
    }
  },
  onUpdate: function(){
    _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) );
  },
  ease: Power3.easeOut,
  onComplete: DRA.prepareNext.init
}, 4 );

Everything is going fine, until I leave the browser window (new tab). I want it to continue animating. I read that I can cancel the usage of RAF. But I couldn't read anything about it in the docs (

 

So I've read that ThrowPropsPlugin uses the TweenLite. I've added the following code to cancel the RAF:

function focusBrowserTab() {
  TweenLite.ticker.useRAF(true);
}

function blurBrowserTab() {
  TweenLite.ticker.useRAF(false);
}

window.addEventListener('focus', focusBrowserTab);
window.addEventListener('blur', blurBrowserTab);

This would be the best possible solution for me. Disable the usage of RAF when the window is blurred. When the window focus is back I want to make use of RAF again.

It is animating now in a non focussed tab, but the tween does not take 4 seconds. More like 30 or so. And when I focus on the tab the timings seem to be messed up. Is there something I do wrong here?

 

Edit: Forgot to tell that I also tried the TweenLite.lagSmoothing(1000, 16); But this didn't make any difference.

Link to comment
Share on other sites

Hello paul_ngc and welcome to the GreenSock forum!

 

You can check if a browser tab or window has focus and then simple pause() your animation. Then when you give the tab focus again play() the animation

 

Here is my codepen example of the HTML5 Visibility API and window focus / blur events...

 

Test this using the FULL mode link.

 

FULL PAGE mode:

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

EDIT mode:

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

To Test, try:

  • First clicking inside the Preview panel so the page gains focus ( very important )
  • Switching between tabs
  • Giving another program focus and come back to the browser

Testing in Edit Mode is a little tricky because the different HTML, CSS, and JS panels trigger the window focus and window blur events. So to test you have to make sure you focus inside the output Preview panel. But I found Full Page mode to work better.

 

What you can do is use the

That  why in my example and code i have 2 parts that work for browser tabs and another part that checks for the browser window

 

Resource:

http://greensock.com/forums/topic/9059-cross-browser-to-detect-tab-or-window-is-active-so-animations-stay-in-sync-using-html5-visibility-api

 

:)

  • Like 2
Link to comment
Share on other sites

Hi @Jonathan,

 

thanks for the detailed post. I tried the HTML5 Visibility API, but there is no difference. Visible/hidden is detected. Just like the focus/blur is working as well. But the framerate of the tween is adjusted due to the RAF that Greensock uses (which is a good thing).

 

But not in this case, because I want the animations to continue playing in the background. But without RAF, because the framerate is throttled otherwise to like 2fps. When I focus the window again the RAF should be used again.

Link to comment
Share on other sites

First of all, did you try turning off lagSmoothing like:

TweenLite.lagSmoothing(0);

?

 

You said you tried setting it to TweenLite.lagSmoothing(1000, 16) but that wouldn't really help because if the tab is hidden for more than 1 second, that's telling it to act like it was only hidden for 16ms (smooth the lag). It sounds like you're actually trying to disable lag smoothing.

 

Also, you can switch from using requestAnimationFrame to using setTimout using the ticker's useRAF() method, like:

TweenLite.ticker.useRAF(false); //stop using requestAnimationFrame
TweenLite.ticker.useRAF(true); //start using it again.

So, for example, you could use Jonathan's advice to listen for when the tab goes inactive and then switch off RAF so that things keep chugging in the background. That's generally not recommended, of course, because it's kinda wasteful to use CPU cycles for animation when the user can't even see it, but it's up to you :) 

Link to comment
Share on other sites

Hi GreenSock

 

thank you for replying. I guess the lagSmoothing doesn't make sense indeed. But as I written in the opening post that I already tried the 

TweenLite.ticker.useRAF(false);

But it is not working. I can hear it because I fade the music that is playing based on the progress of the animation:

onUpdate: function(){
  _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) );
},

So, my question is what do I need to do to make this work with a ThrowPropsPlugin.to Tween? I tested it on OSX latest (Chrome and Safari latest).

Link to comment
Share on other sites

Several modern browsers started throttling setTimout() calls to a maximum of about 1 every second in inactive tabs (even though the HTML5 spec indicates something different). See https://blog.pivotal.io/labs/labs/chrome-and-firefox-throttle-settimeout-setinterval-in-inactive-tabs and https://codereview.chromium.org/6577021. But as for GSAP, your tween should still totally work - it'll just be updated less frequently while the tab is inactive. GSAP is time-based by default, not frames-based, so everything should be adjusted accordingly, especially if you set TweenLite.lagSmoothing(0);

 

When you say that the tween "doesn't work", can you give us more details? Got a codepen demo? 

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.
×
×
  • Create New...