JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="animatedParent animateOnce">
<div class="numbers animated fadeIn go">
<div class="container flexing">
<div class="num-box flex animated fadeInUpShort delay-500 go">
<h2>Nation’s leader in sleep<br> health & science</h2>
</div>
<div class="num-box flex flexing">
<div class="num-single flex animated fadeInUpShort delay-500 go">
<span class="arv">72</span><span class="unit">k</span>
<p>annual diagnostic studies</p>
</div>
<div class="num-single flex flex-percent animated fadeInUpShort delay-500 go">
<span class="arv">9</span><span class="unit">k</span>
<p>physicians trust SleepMed</p>
</div>
<div class="num-single flex flex-percent animated fadeInUpShort delay-500 go">
<span class="arv">31</span><span class="unit">+</span>
<p>hospitals & health systems<br>
partner with SleepMed</p>
</div>
</div>
</div>
</div>
</div>
CSS
body {
margin-top:800px;
}
JavaScript
$(window).scroll(function(){
// This is then function used to detect if the element is scrolled into view
function elementScrolled(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
// This is where we use the function to detect if ".numbers" is scrolled into view
if(elementScrolled('.numbers')) {
$('.arv').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});