title: How could I make the animation starts on scroll down?
body: <p>I wonder how could I make this animation start either when you scroll down 1000px from the top or when you see this it on your screen?</p>
  
  <p>I have tried different ways and zero luck, it  starts automatically when the website loads.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".progress div").each(function() {
      var display = $(this),
          currentValue = parseInt(display.text()),
          nextValue = $(this).attr("data-values"),
          diff = nextValue - currentValue,
          step = (0 &lt; diff ? 1 : -1);
      if (nextValue == "0") {
          $(display).css("padding", "0");
      } else {
          $(display).css("color", "#fff").animate({
              "width": nextValue + "%"
          }, "slow");
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress-bar {
    background-color: #53dceb;
    height: 12px;
    -webkit-transition: width 1.5s ease-in-out;
    transition: width 1.5s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div style="margin-bottom: 2rem"&gt;
      &lt;h5 style="color: #666"&gt;test12 &lt;span class="pull-right"&gt;50%&lt;/span&gt;&lt;/h5&gt;
      &lt;div class="progress"&gt;
          &lt;div data-values="50" class="progress-bar" style="color: rgb(255, 255, 255);"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>