jQuery window in/out of view handler

I want to stop the animation on an HTML page once it is out of view

I tried to use

$(window).focus(function () {
    // start animation
}).blur(function () {
    // stop animation
});

but this code also stops the animation if it is the background of another window.

Is there an handler for window in/out of view in JS or jQuery?

i.e. something like:

$(window).windowInView(function () {
    // start animation
}).windowOutView(function () {
    // stop animation
});

1 answer

  • answered 2018-10-12 11:13 Sven Liivak

    There's two ways: window.requestAnimationFrame()

    example taken/modified from linked page

    <div id="rec" style="width: 5px; height: 5px; background: black;"></div>
    
    var start = null;
    var left=false;
    var element = document.getElementById('rec');
    element.style.position = 'absolute';
    
    function step(timestamp) {
      if (!start) start = timestamp;
      if(!left){
          var progress = timestamp - start;
          element.style.left = Math.min(progress / 10, 600) + 'px';
          if (progress < 6000) {
            window.requestAnimationFrame(step);
          }else{
            start = timestamp;
            left = true;
            window.requestAnimationFrame(step);
        }
      }else{
         var progress = (start+6000)-timestamp;
          element.style.left = Math.max(progress / 10, 0) + 'px';
         if (progress > 0) {
            window.requestAnimationFrame(step);
         }else{
            start = timestamp;
            left=false;
            window.requestAnimationFrame(step);
         }
      }
    }
    

    or Page Visibility API

    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            console.log('hidden');
        }else{
            console.log('visible');
        }}, false);