How to animate this number only when the page is scrolled to this number div?

Question

The number is animating immediately after page is loaded. I don't want to animate it until the page is scrolled to that number's div. Here is my jsfiddle work on it https://jsfiddle.net/sagartt/cvv8sw4q

and code is

<div class="countff">
  <span class="Count">15</span>
  <p style="margin-left: 30px;">+</p>
  <p>COUNTRIES</p>
</div>
<div class="countf">
  <span class="Count" style="left:60px;">250</span>
  <p style="margin-left: 30px;">+</p>
  <p>ARTISANS</p>
</div>
<div class="countf">
  <span class="Count">23</span>
  <p style="margin-left: 30px;">+</p>
  <P>EXPERIENCE</P>
</div>
<div class="countf">
  <span class="Count" style="left:30px;">6000</span>
  <P style="margin-left: 30px;position: relative;
    left: 20px;">Sq.ft</P>
  <P>STUDIO</P>
</div>

.countff {
  margin-top: 400px;
}
<script>
jQuery(document).ready(function() {



  jQuery('.Count').each(function() {
    var jQuerythis = $(this);
    jQuery({
      Counter: 0
    }).animate({
      Counter: jQuerythis.text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        jQuerythis.text(Math.ceil(this.Counter));
      }
    });
  });
})

</script>

Hi @sagar please check below answer and let me know if this is not your requirement I am happy to change it again as per your expectations. — Yogesh Sharma, Dec 16 '15 at 11:02
Possible duplicate of [jquery trigger function when element is in viewport](http://stackoverflow.com/questions/5911138/jquery-trigger-function-when-element-is-in-viewport) — Alvaro Montoro, Dec 16 '15 at 12:07

score 0 · Answer 1 · answered Dec 16 '15 at 11:01

Please check below solution I made some changes in your css and html class please correct them if you think something is wrong - but the functionality you want is working as expected -

jQuery(document).ready(function() {

$(".countf").hover(function(){
    var jQuerythis = $(this).find('.Count');
    jQuery({
      Counter: 0
    }).animate({
      Counter: jQuerythis.text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        jQuerythis.text(Math.ceil(this.Counter));
      }
  });
    }, function(){
        
    });

 
})

.countff {
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countf">
  <span class="Count">15</span>
  <p style="margin-left: 30px;">+</p>
  <p>COUNTRIES</p>
</div>
<div class="countf">
  <span class="Count" style="left:60px;">250</span>
  <p style="margin-left: 30px;">+</p>
  <p>ARTISANS</p>
</div>
<div class="countf">
  <span class="Count">23</span>
  <p style="margin-left: 30px;">+</p>
  <P>EXPERIENCE</P>
</div>
<div class="countf">
  <span class="Count" style="left:30px;">6000</span>
  <P style="margin-left: 30px;position: relative;
    left: 20px;">Sq.ft</P>
  <P>STUDIO</P>
</div>

sorry its not working in my project..the numbers are still same.not animating. I changed my script to your script. — Sagar Kodte, Dec 16 '15 at 11:53
don't want on hover..it has to animated when scroll to this div. — Sagar Kodte, Dec 16 '15 at 11:57
@sagar actually the margin between two div's are very less how you will identify that scroll on that div, let me try to update this solution as per your need. — Yogesh Sharma, Dec 16 '15 at 12:28

How to animate this number only when the page is scrolled to this number div?

1 Answers1