<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>