CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

CountUp

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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-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
});

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us