To be able to use the countup in your application you will need to install the countup.js dependency with npm install countup.js.

Default countup

To create a countup, add data-countup to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.

<h1 data-countup>30000</h1>

Duration

Set the duration to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.

<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>

Starting value

By default the countup will start from zero. If you want to set a different start value use startVal. You can also set the start value to be greater than the final value, so that it counts down instead of up.

<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>

Decimal places

Set how many decimal numbers should be displayed using decimalPlaces.

<h1 data-countup>3.123</h1>
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>

Easing

Disable easing using "useEasing": false. Easing is set to true by default, so that the animation speed changes over the course of its duration.

<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>

Use grouping

Disable grouping using "useGrouping": false. Grouping is set to true by default and the default group separator is a comma.

<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>

Separator

You can change the default comma group separator using separator and specifying the one you wish to use.

<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
<h1 data-countup='{"separator":"-"}'>3000000</h1>
<h1 data-countup='{"separator":":"}'>3000000</h1>

Decimal separator

You can also change the decimal separator which is set to a full stop by default. To do it, use decimal and specify the decimal separator of your choice.

<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>

Prefix

Set the countup prefix using prefix and specifying the prefix you want to add, for instance a currency symbol.

<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>

Suffix

Set the countup suffix using suffix.

<h1 data-countup='{"suffix":"%"}'>30</h1>
<h1 data-countup='{"suffix":"‰"}'>30</h1>
<h1 data-countup='{"suffix":"k"}'>30</h1>

Of course you can mix all of these:

<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>

For more advanced features of countups, click here and see what more you can do.