A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)
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.
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.
By default the countup will start from zero. If you want to set a different start value use
You can also set the start value to be greater than the final value, so that it counts down instead of up.
Set how many decimal numbers should be displayed using
Disable easing using
"useEasing": false. Easing is set to
true by default, so that the animation speed changes over the course of its duration.
Disable grouping using
"useGrouping": false. Grouping is set to
true by default and the default group separator is a comma.
You can change the default comma group separator using
separator and specifying the one you wish to use.
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.
Set the countup prefix using
prefix and specifying the prefix you want to add, for instance a currency symbol.
Set the countup suffix using
Of course you can mix all of these:
For more advanced features of countups, click here and see what more you can do.