Counter

Animates a counter up to a given value. It supports counting up integers (i.e. 12345), floats (i.e. 0.1234), formatted numbers (i.e. 1,234,567.00)


About the Plugin

This feature is implemented by including the counterUp javascript library. For a full list of options, see the project on GitHub.

Our script simply initializes the plugin globally, allowing all counterups to be specified by adding "counter" class on the HTML elements.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

1. Include the library in your page

Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.min.js and before custom.js.

        

  <script src="https://porjoton.netlify.app/mekanic/js/waypoints.min.js"></script>
  <script src="./plugins/counter-up/jquery.counterup.min.js"></script>
        
        
2. Basic Usage

Simply add class counter to specify the desired counterUp on view.

Add the below js code to custom.js file inside the 📁 js folder in case the initialized activation is not already there.

            
    $('.counter').counterUp({
      delay: 10,
      time: 1000
    });
            
            

Animations are run only once by default (on entering the viewport).

For more information, please visit the official counterUp documentation at GitHub.