Animating Number Updates With jQuery

I was working on a user dashboard recently and decided to add some more signposting to values being updated.  Users were able to select different parameters in order to produce different values, but I thought that the values being updated weren't clear enough.

I had the idea to add some animation to the number as it was updated. This would show the user what items changed as they updated the dashboard. As the dashboard project had jQuery installed this gave me a nice animation system to use.

The HTML of the dashboard was quite simple and contained a number of div elements that contained numbers. Each of the different numbers had a id so that it could be updated independently.

    <div class="number-box">
        <div id="some-reported-number">113</div>
    </div>

What I needed was a way to animate this number being updated. A good way to do this is to count from 0 to the value of the number to show that it has changed in some way. The on screen animation will cause the user to understand that the number has updated after they performed an action.

The following function takes an element and a number and will animate the steps from 0 up to that number.

updateNumber = function(element, number){
    $(element).prop('counter',0).animate({
        counter: number
    },
    {
      duration: 500,
      step: function(now){
          $(this).text(Math.ceil(now));
      }
    });
};

The call to the prop() function will setup a variable of 0 that will then be used in the animate() function to take that value up to the passed in number. The duration of 500 means that the whole thing will take half a second to run. Set this number to a higher value if you want the animation to run for longer. Personally, I set it low in order to avoid annoying the user who has to wait for the animation to finish before looking at the number.

This creates a number update that looks like this.

By also using the jQuery UI library I could further enhance this effect by adding in a little "pop" at the end of the animation. This is done using the 'complete' event of the animate function.

updateNUmber = function(element, number){
    $(element).prop('counter',0).animate({
        counter: number
    },
    {
      duration: 500,
      step: function(now){
          $(this).text(Math.ceil(now));
      },
      complete: function(){
        $(this).effect('scale', {'percent': '110','complete': function(){
            $(this).effect('scale', {'percent':'90'});
        }});
      }
    });
};

Now, when the animation has completed the number will 'pulse' slightly to show that is the final value. This is done by increasing the zoom of the element by 10% and then reducing it back down to the original value.

This is what the final version of the code looks like.

As this is a function it can be run from anywhere in your code. You would normally put it in an ajax callback function, but it's also possible to put it in any other event that updates a number. As an example, I created a function that created a random number and then ran the animation function to update the number in our HTML to be that value.

$(document).ready(function(){
    $('.randomise').on('click', function(){
        // Create a random number and update the area.
        let random = Math.floor(Math.random() * (999 - 100) + 100);
        updateNUmber('#some-reported-number', random);
    });
});
 

As a secondary note, if you want to run this function on multiple items at the same time then you can pair it with the each() function. This will loop through the elements found and run the update animation on each of those numbers. This will run as the page loads.

$(document).ready(function(){
    $('.number-box div').each(function(){
        let number = $(this).text();
        updateNUmber(this, number);
    });
});

If you want to see all of this code in action then I have created a CodePen that shows this number animation working. Feel free to play with the parameters to create the effect you are looking for.