Javascript Number Counter

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 :-\


Here is my site Read-Only: Webflow - NCOHF Website

Live Site is here: http://ncohf-website.webflow.io/

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 src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$('.counter').each(function () {
    $(this).prop('Counter',1).animate({
        Counter: $(this).text()
    }, {
        duration: 1500,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
</script>

<div class="counter">1000000</div>
1 Like

Remove this line. never add a second jQuery on top of Webflow’s one

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Move this to Page Footer Code

<script>
$('.counter').each(function () {
    $(this).prop('Counter',1).animate({
        Counter: $(this).text()
    }, {
        duration: 1500,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
</script>

Hi fmcausby,

Maybe this could help: counterup - Webflow

Cheers!

1 Like

Nice. The docs are missing (It’s better to tell users the full copy-paste code + assets) (For future searches).

1/3. before body - include 2 assets:

waypoints trigger counterup function when you scroll into view

<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>

2/3. add counterup class

image

3/3. jQuery initialize

<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>

Counter-Up Docs (fork “new” code)

3 Likes

Thanks for the help everyone.

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.

Thanks everyone!

Very weird to load jQuery 2 for such small issue (buggy). Why not using @ColibriMedia example?

summary:

Your solution not good (Jquery 2 & 3 Could make endless bugs). Maybe the bug in on safari version X on iphone6 (No way to know this).

Thanks @Siton_Systems! This looks promising, grateful for everyone’s feedback.

2 Likes

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.

No need for jQuery (webflow already load jQuery by default).

Starting on March 1st, 2018, newly published Webflow sites will include the latest version of jQuery (v3.3.1) . Previously, Webflow sites were published using jQuery v2.2.0.
Custom code in head and body tags | Webflow University

You are the man!!!

2 Likes

I am trying to get this to work by pasting the script in the head tag (custom code)

Then in the Designer, I made a text div called counterup with a number in it.

What am I missing?

@jar - Paste “before body” (After Jquery loads).
Anyway add URL.

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.

What URL are you referring to?

Your site url + read only link.

And please wrap your code
image

Sorry can’t because of client requirements…

Aha!:

<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’.

1 Like

Hi there! Great function! I was wondering why CMS text isn’t working/ or is not counting op? What am I missing? I’m not so good at code…

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.)

https://webcache.googleusercontent.com/search?q=cache:8y-KD5eJkqIJ:https://university.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site+&cd=3&hl=en&ct=clnk&gl=us&client=safari

https://preview.webflow.com/preview/wood-architects-sample-2?utm_medium=preview_link&utm_source=designer&utm_content=wood-architects-sample-2&preview=b434f3e294c1fdf74764497f71273ddc&pageId=5e8c87e8723fe56fda0abde3&itemId=5e8c87e8723fe5b1d10abe40&mode=preview

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