Jquery Animated Counter Up but work automatically on mobile view - html

Question

I'm building a counter up for a website. It works perfectly but in mobile view it doesnt wait to get user into it. On computer view, it starts when user sees it. But in mobile view, it starts automatically so it ends before user sees it. Any ideas?
$(document).ready(function($) {
//Check if an element was in a screen
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom));
}
//Count up code
function countUp() {
$('.counter').each(function() {
var $this = $(this), // <- Don't touch this variable. It's pure magic.
countTo = $this.attr('data-count');
ended = $this.attr('ended');
if ( ended != "true" && isScrolledIntoView($this) ) {
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000, //duration of counting
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
$this.attr('ended', 'true');
}
});
}
//Start animation on page-load
if ( isScrolledIntoView(".counter") ) {
countUp();
}
//Start animation on screen
$(document).scroll(function() {
if ( isScrolledIntoView(".counter") ) {
countUp();
}
});
});
.counter-box h1 {
font-size: 25px;
}
.counter-box h1 span {
color: #ff9aa2;
}
.counter-box h4 {
font-size: 20px;
margin-bottom: 60px;
}
.counter-box i.fa {
font-size: 30px;
margin-bottom: 10px;
}
.counter-box p {
font-size: 20px;
}
.counter-desc {
font-size: 16px;
opacity: 0.7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row counter-box text-center">
<div class="col-12" style="margin-bottom: 15px;">
<h1>Sayılarla Türkiye'de <span style="color: #cc0000;">Test Sitesi</span></h1>
</div>
<div class="col-4 counterH"><i class="fa fa-code"></i>
<p><span class="counter" data-count="33">0</span>+</p>
<span class="counter-desc">Yıllık Hizmet</span></div>
<div class="col-4 counterH"><i class="fa fa-coffee"></i>
<p><span class="counter" data-count="18000">0</span>+</p>
<span class="couenter-desc">Çeşit Ürün</span></div>
<div class="col-4 counterH"><i class="fa fa-bug"></i>
<p><span class="counter" data-count="800">0</span>+</p>
<span class="counter-desc">Personel</span></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function($) {
//Check if an element was in a screen
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom));
}
//Count up code
function countUp() {
$('.counter').each(function() {
var $this = $(this), // <- Don't touch this variable. It's pure magic.
countTo = $this.attr('data-count');
ended = $this.attr('ended');
if ( ended != "true" && isScrolledIntoView($this) ) {
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000, //duration of counting
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
$this.attr('ended', 'true');
}
});
}
//Start animation on page-load
if ( isScrolledIntoView(".counter") ) {
countUp();
}
//Start animation on screen
$(document).scroll(function() {
if ( isScrolledIntoView(".counter") ) {
countUp();
}
});
});
// ]]></script>

Answer 1

I figure out that it happens because of other components. When i enter the page, other components automatically disappear then show up. So our counter starts from top to bottom because of component rendering.