How to pause jquery animation when window is not in focus?

I’m new to this community so excuse me if the answer to my question may come be stupid-simple. I’ve created this site on webflow: https://flumes-fantastic-site.webflow.io/ with the help of the jquery ripples library and I’m trying to make the automatic drops stop when I switch tabs or when the window is not on focus. This is because whenever I switch tabs and come back to it, the animation seems to have “loaded” and shoots all drops at once which looks kinda funny.

I’m new to coding so I’m probably messing up here with the code. This is what the developer of the library has in the documentation https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html:

<script src="../dist/jquery.ripples.js"></script>
<script>
$(document).ready(function() {
    try {
        $('body').ripples({
            resolution: 512,
            dropRadius: 20, //px
            perturbance: 0.04,
        });
        $('main').ripples({
            resolution: 128,
            dropRadius: 10, //px
            perturbance: 0.04,
            interactive: false
        });
    }
    catch (e) {
        $('.error').show().text(e);
    }

    $('.js-ripples-disable').on('click', function() {
        $('body, main').ripples('destroy');
        $(this).hide();
    });

    $('.js-ripples-play').on('click', function() {
        $('body, main').ripples('play');
    });

    $('.js-ripples-pause').on('click', function() {
        $('body, main').ripples('pause');
    });

    // Automatic drops
    setInterval(function() {
        var $el = $('main');
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        var dropRadius = 20;
        var strength = 0.04 + Math.random() * 0.04;

        $el.ripples('drop', x, y, dropRadius, strength);
    }, 400);
});
</script>

And this is what I’ve come up with looking for answers in the community but isn’t working:

<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>
<script>
$('#ripple').ripples({
    resolution: 512,
    dropRadius: 30,
    perturbance: 0.04,
});

setInterval(function() {
        var $el = $('#ripple');
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        var dropRadius = 30;
        var strength = 0.04 + Math.random() * 0.04;

        $el.ripples('drop', x, y, dropRadius, strength);
    }, 2500);

</script>

<script>

var window_focus;

$(window).focus(function() {
    window_focus = true;
})
    .blur(function() {
        window_focus = false;
    });

$(document).one('click',function() {
$('#ripple').ripples('play');
    });
  
  $(document).one('click',function() {
$('#ripple').ripples('pause');
    });
  
setInterval(function() { $('body').append('has focus? ' + window_focus + '<br>'); }, 1000);
});

</script>

I’m sorry if the answer to this is super simple and I’m just wasting your time but i appreciate any help you can give me.

Thank you.

Answer

The key is to enable the timer when the window gets the focus, and disable it when the focus is lost:

function randomDrop() {
  var $el = $('#ripple');
    var x = Math.random() * $el.outerWidth();
    var y = Math.random() * $el.outerHeight();
    var dropRadius = 30;
    var strength = 0.04 + Math.random() * 0.04;
    $el.ripples('drop', x, y, dropRadius, strength);
}

$(function() {
  $('#ripple').ripples({
    resolution: 512,
    dropRadius: 30,
    perturbance: 0.04
  });
  var timer = null;
  $(window).focus(function() {
    if (timer === null) {
      //console.log('on');
      timer = setInterval(randomDrop, 2500);
    }
  })
  .blur(function() {
    if (timer !== null) {
      clearInterval(timer);
      timer = null;
      //console.log('off');
    }
  })
  .focus();
});

<div class="container w-container">
  <section class="hero wf-section">
    <div class="w-embed"><div id="ripple" style="height:100%; Width: 100%; position: absolute; left 0%; top: 0%; right: 0%; bottom: 0%; background: url(https://i.ibb.co/kBgPMYY/wellness-hd.jpg) left top / cover;"></div>
    </div>
  </section>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=62f2d2e2cbc47f8cda0a15b9" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>

Advertisement

Answer