title: Make numbers animate when user scrolls and reach a div
body: <p>I have a simple jQuery code that works perfectly (and I would like to keep). The problem is that this animation is in a section below on page and it starts running when the page loads. I need this animation (numbers start at 0 and run until the number I put in the divs) to happen only when the user scroll and reaches that div. I searched on google and here on StackOverflow but the solutions that I found didn't work or required a plugin (which I don't wanna use).</p>
  
  <p>Here's the Demo code that I have until the moment:
  <a href="https://jsfiddle.net/aj7Lk2bw/2/" rel="nofollow noreferrer">https://jsfiddle.net/aj7Lk2bw/2/</a></p>
  
  <p>the jQuery is: </p>
  
  <pre><code>    $('.value').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
  });
  </code></pre>