I’ve found a couple of topics about using animated JS number counters in a code embed, but am having trouble getting mine to work. Read-only link is below, the counter is near the bottom of the homepage (“Our impact by the numbers”).
I’m trying to combine this JS number counter (that works fine in Codepen) and will need to also find a way for it to only animate when that section scrolls into view (like in this thread).
Wondering if @bartekkustra can help? I feel like I’m probably missing something obvious :-\
I noticed I was using an older JS library in Codepen, so I made sure I was doing the same in Webflow. Here is the code from my embed. Any advice anyone?
<script>
jQuery(document).ready(function( $ ) {
$('.counterup').counterUp({
delay: 100, // the delay time in ms
time: 2000 // the speed time in ms
});
});
</script>
JQuery Selectors. The name of the class (Step 2) & the name of the jquery class selector $('.counterup') should match.
Full code
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>
<script>
jQuery(document).ready(function( $ ) {
$('.counterup').counterUp({
delay: 100, // the delay time in ms
time: 2000 // the speed time in ms
});
});
</script>
In the end, I hacked together JS from this pen (to get the animation to start when scrolled) and this pen (to put commas between the numbers), and it works quite nicely.
So now, the final embed if someone wants to use it in the future is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>`
<div class="counter">
<div class="counter-value" data-count="1000000">0</div>
</div>
<script>
var a = 0;
$(window).scroll(function() {
var oTop = $('.counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(commaSeparateNumber(Math.floor(this.countNum)));
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
}
});
});
a = 1;
}
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val;
}
</script>
Using some dynamic fields in the code embed (not shown above), I was also able to pull a random statistic from the CMS so the client can add and update them.
@ samliew, I hear what you’re saying about not adding a second jQuery, but it’s the only way I can get this way to work (because the original pen uses jQuery 2.1.3). I’m out of my depth here, but I was reading about using jQuery.noConflict() when more than one version is being used? Is that something I need to consider adding? Everything else is working, at least that I can see.
I went back and updated what I had with this new Count-up.js demo. For those (like me) who might like to see exactly what to copy/paste into WF, here was my final code that seems to be working nicely:
In the footer for every page with the counter (or footer code for all pages in site settings), use this JS:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("span.counter").counterUp({
delay: 75, /* The delay in milliseconds per number count up */
time: 3000, /*The total duration of the count up animation */
offset: 100,
/*The viewport percentile from which the counter starts (by default it's 100, meaning it's triggered at the very moment the element enters the viewport) */
});
});
</script>
On the page you want your counter, in an HTML embed, use this code:
<span class="counter">1,000,000</span>
On the site I was working on, we used a custom field from the CMS for the number which allowed the client to update the numbers and for it pull a random statistic from the collection in our database.
Thanks! Sorry for asking but can you say exactly what to do in the Designer?
Now I added “< script > jQuery(document).ready(function( ) { (’.counterup’).counterUp({ delay: 100, // the delay time in ms time: 2000 // the speed time in ms }); }); ” in “before tag:”
And in the designer I have a text div called counterup. In it I wrote 20. It is showing on the site, but no counting effect.
<script> jQuery(document).ready(function( ) { (’.counterup’).counterUp({ delay: 100, // the delay time in ms time: 2000 // the speed time in ms }); });
It’s difficult to help without the read-only link. However, you mentioned that your div is called ‘counterup’. Change it so the text elements class is ‘counterup’.
Hi Charlotte, could you post a read-only link to your site? When I did this, I just used a Collection field in the HTML Embed. (For some reason Webflow University is down but here is a link to the cached tutorial page.)
You’ll see the one that is counting up is no CMS field =) so that is working - the others don’t… Thanks a lot already to reply on my case =) I will look through the link you send me
