All the Counter Examples You Need

CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way. In this boost we will look at how to leverage the library to build counter animations that trigger on scroll, handle currency, andeven update on a specific interval!

Despite its name, CountUp can count in either direction, depending on the start and end values that you pass. We'll have a look at how to make it count down as well.

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

Inside </body> tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.3.2/countUp.umd.min.js" integrity="sha512-Be9XaN4NvN8CVmbk4juf7JX2/87a7I37CX1WV37w+jyav4exBHDqHzmjs+Tbx7Dt2j9vpULDZNxcP0sZP03/WQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// Example 1 - Counter in Hero
const numAnim = new countUp.CountUp("count", 2000);
numAnim.start();

// Example 2 - Scroll into View
const numAnim2 = new countUp.CountUp("count2", 4000, { enableScrollSpy: true });

// Example 3 - Multiple Numbers incl. count down, currency.
const optionsCountDown = {
  enableScrollSpy: true,
  startVal: 9,
  duration: 2
};
const numAnimDown = new countUp.CountUp("count-down", 0, optionsCountDown);

const optionsSubs = {
  enableScrollSpy: true,
  duration: 3,
  suffix: "K"
};

const numAnimSubs = new countUp.CountUp("count-subs", 9, optionsSubs);

const optionsRevenue = {
  enableScrollSpy: true,
  decimalPlaces: 2,
  duration: 4,
  prefix: "$"
};
const numAnimRevenue = new countUp.CountUp(
  "count-revenue",
  1234,
  optionsRevenue
);

// Example 4 - count every X seconds

const interval = 2; // specify interval in seconds

const optionsSaved = {
  enableScrollSpy: true,
  decimalPlaces: 2,
  duration: interval,
  prefix: "$"
};

let savedVal = 6543;
const numAnimSaved = new countUp.CountUp("count-saved", savedVal, optionsSaved);
setInterval(() => {
  savedVal += 100;
  numAnimSaved.update(savedVal);
}, interval * 1000);

</script>