A widget to animate a numerical value by counting to it.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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-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');
// animation is over