I'm trying to achieve a counter,
So I found this working code here on Stack, however $(this).stop causes the count animation to bump back in value and then start again.
Maybe someone knows a better way of doing that.
In the end I would like to achieve like a ticking effect (small number increases) so easing is not an option.
$( document ).ready(function() {
$('.counter').each(function () {
var $this = $(this),
countTo = $this.attr('data-count');
var animation = {
countNum: countTo
};
$({ countNum: $this.text() }).animate(animation, {
duration: 10000,
step: function (now, fx) {
$this.text(Math.floor(this.countNum));
if (fx.pos > 0.5) {
$(this).stop();
$(this).animate(animation, {
duration: 10000,
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
}
});
}
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="counter" data-count="1000000">0</h1>
<h1 class="counter" data-count="50">0</h1>Here is jsfiddle: https://jsfiddle.net/r97nyb1p/