Menu
I'm trying to use this countUp.js library to achieve that nice rising number animation. I found a cdn and put it in my code and followed a tutorial on how to use it.
Repo https://github.com/inorganik/countUp.js
CDN https://cdnjs.com/libraries/countup.js/2.0.0
Tutorial https://www.youtube.com/watch?v=cJ-T8Gb12lI
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.0/countUp.min.js" integrity="sha512-E0zfDwA1CopT4gzJmj9tMpd7O6pTpuybTK58eY1GwqptdasUohyImuualLt/S5XvM8CDnbaTNP/7MU3bQ5NmQg==" crossorigin="anonymous"></script>
</head>
<body>
<div id="counters">
<p id="counter1">0</p>
</div>
<script>
let demo = new CountUp('counter1', 0, 100);
demo.start();
</script>
</body>
</html>
This code gives me Uncaught ReferenceError: CountUp is not defined in the console.
580
asked Apr 24 '26 07:04
As described in the docs on including Countup the CDN version is served as a module.
One option is to use the non-module umd version
const c = new countUp.CountUp("counter1", 500)
c.start()<script src="https://inorganik.github.io/countUp.js/dist/countUp.umd.js"></script>
<div id="counters">
<p id="counter1">0</p>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
