Streaming live at 10am (PST)

Javascript Number Counter


#1

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: https://preview.webflow.com/preview/ncohf-website?utm_source=ncohf-website&preview=ae6747fbba89fec98ba47aa6e2f137e9

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


Odometer on scroll position (JS Code help needed)
#2

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>

#3

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>

#4

Hi fmcausby,

Maybe this could help: https://webflow.com/website/counterup

Cheers!


#6

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)


#7

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!


#8

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


#9

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


#11

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.


#12

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.
https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site