Hmmm, kind of yeah, but it needs to start when both are in view and stop after first go. I was wondering if there were any non code ways using interactions to maybe make it smoother.
Hey Alex, thanks for posting this plugin! Its almost exactly what I need. Do you know what I could add to make the counter loop and start again after it hits its target number?
I need it to reach its target then delay for 2 seconds and start again and continue to do this.
I found that thread here and wanted to ask if you guys actually found the right custom code to execute the counting animation on sroll into view ? I have checked Pablo’s Renova template but could not find any code. I hope this thread might help other people too !
So I inspired myself from all around in the internet and came up with this little custom code that almost works. The only problem is that it is going backwards after it’s done counting when the element got into view.
Feel free to have a look at my codepen if you like
$(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;
}
if (elementScrolled(".count")) {
// counting function
$(".count").each(function() {
$(this)
.prop("Counter", 0)
.animate(
{
Counter: $(this).text()
},
{
duration: 2000,
easing: "swing",
step: function(now) {
$(this).text(Math.ceil(now));
}
}
);
});
}
});