CODEWITHSUNDEEP
javascriptjquerycssvelocity.js
forethought
forethought

Reputation: 3263

velocityjs animation get messed up when animation running browser tab becomes inactive

I have animation running continuously on setInterval. Animation with two items in sequences are working fine but when adding third item to sequence, the animation gets messedup when users open new tab and check something and come back to animation tab.

JSBin link

https://jsbin.com/surukuhuka/edit?html,css,js,console,output

var ball_2_BlinkDuration = 100,
  ball_2_BlinkDelay = 50,
  ball_2_BlinkInterval = null,
  ball_2_BlinkIntervalDelay = 500,
  $ball_2 = $('.ball--2');

var delay = 15 * (ball_2_BlinkDuration + ball_2_BlinkDelay) + ball_2_BlinkIntervalDelay; //calculating delay
window.clearInterval(ball_2_BlinkInterval);


function dataFlowing__2() {
  $ball_2.velocity({
    bottom: "100%"
  }, {
    complete: function() {
      $(this).velocity({
        left: "90%"
      }, {
        complete: function() {
          $(this).velocity({
            top: "3%"
          }, {
            complete: function() {
              $(this).removeAttr('style');

            }
          });
        }
      });
    }
  });
}

var ball_2_BlinkInterval = window.setInterval(function() {
  dataFlowing__2();
}, delay);
.data--flow--2 {
  position: absolute;
  width: 103px;
  height: 176px;
  border-top: 10px solid #2F94BB;
  border-left: 10px solid #2F94BB;
  .ball--2 {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    background-color: #FFFFFF;
    bottom: 5px;
    left: -10px;
  }
  .data--flow--sub {
    float: right;
    background-color: #2F94BB;
    width: 10px;
    height: 10px;
  }
}
<div class="data--flow--2">


  <div class="ball--2"></div>
  <div class="data--flow--sub">

  </div>
</div>

Upvotes: 0

Views: 222

Answers (2)

Rycochet
Rycochet

Reputation: 2938

You cannot animate on setInterval in modern browsers when the tab gets hidden - they will throttle setInterval to ~1fps, and in addition the amount of CPU given to Javascript is being reduced more depending on the browser.

I've just pushed a change to Velocity's background handling, so it will attempt to keep running at 30fps in the background (safer than trying for 60fps due to other changes needed), which will make it into 2.0.3 but is currently sitting on Github while other changes are made / documented.

Technically it's now using a WebWorker in the background, and when there are animations and the tab is hidden it will fire up, and send a msg to the animation every frame or so - it's not designed to be super accurate, and it also can't work on IE10 (and possibly IE11), though has been tested in all modern desktop browsers. Mobile browsers pause background tabs more aggressively so this isn't relevant.

Also of note - window.focus / window.blur is to do with the window, and not the tab being hidden. The window can be inactive and still playing a full speed animation, but document.hidden is what the browser uses to report if the animation is otherwise paused.

Upvotes: 1

George
George

Reputation: 2422

Pause the animation when changing tab, and resume it when the window receives focus again:

function beginInterval(){
  ball_2_BlinkInterval = setInterval(function() {
    dataFlowing__2();
  }, delay);
}
$(window).focus(function() {
  beginInterval();
});

$(window).blur(function() {
  clearInterval(ball_2_BlinkInterval);
});

Upvotes: 0

Related Questions