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

All Projects

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:

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.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.