requestAnimationFrame background handling

[Rycochet]

I've got to make a really irritating little site (don't blame me - clients etc lol), which needs animation going pretty much all the time, including creating dynamic elements, animating them in, then animating them out again a short while later (too dynamic to just toggle sadly).

Sadly the downside to requestAnimationFrame is that when the animation is wanting to happen on a background window/tab it doesn't actually happen - resulting in me going back a while later to find hundreds of new elements that animate out almost immediately.

I've been thinking about what's best to do - and can easily check if the tab is active for starting things etc, but how about an option (possibly) to setTimeout the end time, and if the animation hasn't been called (or it's in the background etc) then call complete() and set the final values?

[julianshapiro]

I've solved this issue. Expect it in the upcoming update. It works automatically and has no performance drawbacks.

[julianshapiro]

This is now available in the latest version. Please update your copy of Velocity and let me know if there are any issues.

[Rycochet]

I like this way of doing it - going to have to adjust some of my code now :-P

[iwsfg]

Hmm..... Fix from 5508fea works fine only if tab was intialy active and later was moved onto background.

Howerver, if tab happens to be inactive at the moment when Velocity code is being executed
(when browser just got launched and it restored bunch of tabs, for instance), visibilitychange event wont fire until we enter the tab. So reassignment code never kicks in, leaving rAF variable point at the native requestAnimationFrame implementation and execution of every animation we start during this time window is being postponed.

Unless it was intended to work this way (I don't see the reasons for this though) I think it should be changed to something like

if (!Velocity.State.isMobile && document.hidden !== undefined) {
    var spoofTicker = function() {
        /* Reassign the rAF function (which the global tick() function uses) based on the tab's focus state. */

        if (document.hidden) {
            rAF = function(callback) { 
                /* The tick function needs a truthy first argument to pass its internal timestamp check. */
                return setTimeout(function() { callback(true) }, 16);
            };

            /* The rAF loop has been paused by the browser, so we manually restart the tick. */
            tick();
        } else {
            rAF = window.requestAnimationFrame || rAFPollyfill;
        }
    };

    document.addEventListener("visibilitychange", spoofTicker);
    spoofTicker();
}

but with a better name for the function than the one I came up with.

That's probably unnecessary, but here's a very basic fiddle you can observe problem at. (Just click the link with Mouse3 button or Ctrl+Mouse1, wait for 3-5 seconds after its finished loading and switch to it. You will see animation playing, even though it should be finished at that point.)