title: Jquery Text Animation On Scroll
body: <p>Successful:
  I am able to animate text count when div is scrolled to.</p>
  
  <p>Problem:
  1. It counts up and then back down. I need this to count up once only and stop.
  2. I need the numbers to default on page load to 0. Currently they load to target number and reset to zero when the div is scrolled to.</p>
  
  <p>Here is the code...</p>
  
  <p>JQuery:</p>
  
  <pre><code>$(window).scroll(function() {
     var hT = $('#scroll-to').offset().top,
         hH = $('#scroll-to').outerHeight(),
         wH = $(window).height(),
         wS = $(this).scrollTop();
      console.log((hT-wH) , wS);
     if (wS &gt; (hT+hH-wH)){
  $('.count').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));    
          }
      });
  });
          }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id="scroll-to"&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;200&lt;/span&gt;&lt;/div&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;1000&lt;/span&gt;&lt;/div&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;853&lt;/span&gt;&lt;/div&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;154&lt;/span&gt;&lt;/div&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;10&lt;/span&gt;&lt;/div&gt;
  &lt;div id="shiva"&gt;&lt;span class="count"&gt;87&lt;/span&gt;&lt;/div&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;div id="talkbubble"&gt;&lt;span class="count"&gt;1421&lt;/span&gt;&lt;/div&gt;
  &lt;div id="talkbubble"&gt;&lt;span class="count"&gt;145&lt;/span&gt;&lt;/div&gt;
  &lt;div id="talkbubble"&gt;&lt;span class="count"&gt;78&lt;/span&gt;&lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#shiva
  {
    width: 100px;
      height: 100px;
      background: red;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
    float:left;
    margin:5px;
  }
  .count
  {
    line-height: 100px;
    color:white;
    margin-left:30px;
    font-size:25px;
  }
  #talkbubble {
     width: 120px;
     height: 80px;
     background: red;
     position: relative;
     -moz-border-radius:    10px;
     -webkit-border-radius: 10px;
     border-radius:         10px;
    float:left;
    margin:20px;
  }
  #talkbubble:before {
     content:"";
     position: absolute;
     right: 100%;
     top: 26px;
     width: 0;
     height: 0;
     border-top: 13px solid transparent;
     border-right: 26px solid red;
     border-bottom: 13px solid transparent;
  }
  
  .linker
  {
    font-size : 20px;
    font-color: black;
  }
  </code></pre>
  
  <p>UPDATE: <a href="https://jsfiddle.net/3ox12xyt/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Any assistance you can provide would be greatly appreciated. Thank you.</p>