Streaming live at 10am (PST)

Help with a number counting animation


#1

Hi All,

I’ve tried to make a counting up set of numbers to convery a currency exchange on this website.

It’s about halfway down.

http://worldunited.webflow.io/

I think its a bit janky so was wondering if anyone knew of a way to make it smoother.

Thanks :slight_smile:

Josh


Here is my public share link: LINK


Installing a number counter
Trying to make a counter for a number
#2

@OvertonGraphics

Hey Josh. Nice site you have there.

Is this what you are looking for?

http://bfintal.github.io/Counter-Up/demo/demo.html


#3

Thanks mate,

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.

Thanks for the link though :slight_smile:


#4

Dont think there are any non code ways of doing this.


#5

OK then, it will have to remain as sketchy as it is for now then :slight_smile:

Cheers


#6

Hey Josh,

Check out the number counter in Pablo’s template ‘Renova’ - http://renova-ui-kit.webflow.io/elements#Bar-Charts

Best,
Naweed


#7

@AlexManyeki

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.

Any help would be much appreciated :smiley:

Thanks

Ali


#8

Hi guys :slight_smile:

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

My question:
What am I missing ?

ho and here is the js code:

$(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));
            }
          }
        );
    });
  }
});