How to add an animated counter

Step 1

Go to this page to download the zip file : https://github.com/inorganik/CountUp.js
Note that it works only with countUp 1.9.3 (not the version 2.0.0 or > )

Upload and enqueue the JS file :

wp_enqueue_script( 'countUp-js', plugin_dir_url( __FILE__ ) . 'assets/js/countUp.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Add a Text element (or a Headline element) and change his ID to myCounter1

Step 3

In a Code Block, add this Javascript code :

var numAnim = new CountUp("myCounter1", 0, 200, 0, 4);
numAnim.start();

Here is the result :

For more options, check this page :

https://inorganik.github.io/countUp.js/

It will also generate the code for you.

Note

Don't forget to use the Waypoints library if you want the animation to start only when it enters the viewport. Here is an example :

var waypoints = $('#myCounter3').waypoint(function(direction) {

    var options = {
        suffix: '%'
    };
    var numAnim = new CountUp("myCounter3", 0, 100, 2, 4, options);
    numAnim.start();

    this.destroy()
}, {
    offset: '100%'
})

More info about Waypoints :
Trigger a function when you scroll to an element

The full code for the 3 counters at the top of this page :

(function($) {

    var waypoints = $('#myCounter1').waypoint(function(direction) {

        var numAnim = new CountUp("myCounter1", 0, 200, 0, 4);
        numAnim.start();

        this.destroy()
    }, {
        offset: '100%'
    })

    var waypoints = $('#myCounter2').waypoint(function(direction) {
        var options = {
            prefix: '+'
        };
        var numAnim = new CountUp("myCounter2", 0, 50, 0, 4, options);
        numAnim.start();

        this.destroy()
    }, {
        offset: '100%'
    })

    var waypoints = $('#myCounter3').waypoint(function(direction) {
        var options = {
            suffix: '%'
        };
        var numAnim = new CountUp("myCounter3", 0, 4.9, 1, 5, options);
        numAnim.start();

        this.destroy()
    }, {
        offset: '100%'
    })


})(jQuery);