jQuery Animate Numbers – Animated Number Increase

A lightweight (1.52KB Minified), multi-purpose and stand-alone plugin for jQuery to animate numbers. The number animation can be trigger with different JavaScript / jQuery events (i.e on click, scroll, load etc). You just need to input the ending value of number in plugin configuration. Then, the plugin count up / increase that value from 0 to end value.

Furthermore, it is also compatible with Bootstrap and other frameworks. You can fully customize it with additional CSS.

Plugin Overview

Plugin: Animate Numbers
Author: talmand
Licence: MIT Licence
Published: September 18, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.8.3 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7.40 KB

How to Use jQuery Animate Numbers Plugin

1. First of all load jQuery JavaScript library and plugin’s JS file into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Animate Numbers JS -->
<script src="js/jquery.animateNumbers.min.js"></script>

2. Now decide, how would you like to trigger counting up number animation? Ok, you can animate values on almost all type of JavaScript events. First you need to create a container (a div or input element) in which your numbers will increase. So, create a div element with a unique id and place your initial value in it.

<div id="myNumber">0</div>

2.1 If you want to increase number in input element, you can define code as below:

<input id="num_input" value="1234" />

3. After that, initialize the plugin in jQuery document ready function to active the numbers animation.

$(document).ready(function(){

   $("#myNumber").animateNumbers(52810);

});

Note: The plugin initialization is same for all type of HTML elements (i.e div, input, span etc). Just initialize the plugin with that element id or class.

4. If you want to animate numbers on different events, you can execute the animation using the following syntax.

$(".element").on('event-type', function(){

   $("#myNumber").animateNumbers(52810);

});

Tip: Define the event-type (i.e click, load, scroll, submit etc.) in the above mentioned code block to run number animation.