CountUp

A widget to animate a numerical value by counting to it.

How to

The Countup component can be used to animate a number from an original value to a different final one. The animation will be triggered as soon as the number enters the viewport.

Set the content of the .js-countup element equal to the final numerical value.

You can edit the following data attributes (applied to the .js-countup element) to customize the plugin behavior:

• data-countup-start: initial value of the countup. Default is 0;
• data-countup-delta: if you want the starting value to be smaller than the final value of a specific delta (e.g, if final value is 100 and delta is 25, the starting point will be 75). Default is 0;
• data-countup-duration: duration of the animation (in ms). Default is 3000 ms (3s);
• data-countup-decimal: number of decimal places. Default is 0;
• data-countup-sep: set this attribute equal to "true" if you want to show a comma as a thousands separator (e.g., 1,200 rather than 1200).

You can listen to the end of the animation using the countUpComplete custom event that is emitted when the animation is completed:

var countElement = document.getElementsByClassName('js-countup')[0];
countElement.addEventListener('countUpComplete', function(event){
  // animation is over
});

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗