In the world of interactive web design, animated counters have become a staple for showcasing statistics, achievements, and metrics. These “countup” animations, which typically count from zero to a specified number, create a dynamic visual effect that draws user attention to important numerical data.
Whether you’re looking to highlight your website’s visitor count, showcase product sales, or emphasize any statistical achievement, JavaScript countup solutions can add that extra layer of engagement to your web project.
In this comprehensive guide, we’ll explore 10 of the most popular JavaScript countup libraries available in 2025, detailing their features, implementation, and what makes each unique.
This is an update to an article I wrote a couple of years ago. Still finding some content that has not been moved to the new setup ;)
1. CountUp.js
CountUp.js is a dependency-free, lightweight JavaScript class that has become one of the most widely used counting solutions on the web.
Key Features:
- No dependencies
- Highly customizable animation
- Supports counting in either direction
- Smart easing for large numbers
- Lightweight (under 9KB)
- Scroll-triggered animations
Implementation:
// Basic implementation
const countUp = new CountUp('targetElementId', 2500);
if (!countUp.error) {
countUp.start();
} else {
console.error(countUp.error);
}
// With options
const options = {
startVal: 0,
duration: 2.5,
decimalPlaces: 2,
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '$',
suffix: ' USD'
};
const countUp = new CountUp('targetElementId', 2500, options);
countUp.start();
Links:
- GitHub Repository (8.1k+ stars)
- Demo Page
- NPM Package
2. PureCounter.js
PureCounter.js is a simple yet highly configurable vanilla JavaScript library for creating counting animations.
Key Features:
- Extremely lightweight (1.4KB gzipped)
- No dependencies
- Built-in lazy loading
- Configurable per element via data attributes
- Support for currency, file size, and decimal formatting
- Scroll-triggered animations
Implementation:
<!-- HTML Setup -->
<span class="purecounter" data-purecounter-start="0" data-purecounter-end="5000" data-purecounter-duration="2">0</span>
<!-- JavaScript Setup -->
<script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>
<script>
new PureCounter();
</script>
Advanced Configuration:
new PureCounter({
selector: '.purecounter',
start: 0,
end: 100,
duration: 2,
delay: 10,
once: true,
decimals: 0,
legacy: true,
filesizing: false,
currency: false,
separator: false
});
Links:
- GitHub Repository (127+ stars)
- NPM Package
3. jQuery CounterUp (Original)
The original CounterUp is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible in the viewport.
Key Features:
- Simple implementation
- Scroll-triggered counting
- Support for integers, floats, and formatted numbers
- Dependency on jQuery and Waypoints.js
Implementation:
<!-- Include required libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
<!-- HTML -->
<span class="counter">1,234,567.00</span>
<!-- Initialize -->
<script>
$('.counter').counterUp({
delay: 10,
time: 1000
});
</script>
Links:
- GitHub Repository (748+ stars)
- Demo Page
4. Counter-Up2
Counter-Up2 is the modern successor to the original jQuery CounterUp plugin, removing jQuery dependencies for better performance.
Key Features:
- No jQuery dependency
- Smaller file size
- Modern JavaScript practices
- Simple API
- Works with any JavaScript framework
Implementation:
<!-- Include the script -->
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<!-- HTML -->
<h1 class="counter">1,234,567.00</h1>
<!-- Initialize -->
<script>
const counterUp = window.counterUp.default;
const el = document.querySelector('.counter');
// Simple
counterUp(el);
// With options
counterUp(el, {
duration: 1000,
delay: 16,
});
</script>
Links:
5. Animated Counter by Alimul Hasan
This lightweight vanilla JavaScript library provides a simple way to create countup animations with minimal configuration.
Key Features:
- Vanilla JavaScript implementation
- No dependencies
- Easy to implement
- Customizable duration and easing
Implementation:
<!-- HTML -->
<span class="ac" data-target="5000">0</span>
<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const counters = document.querySelectorAll('.ac');
counters.forEach(counter => {
const target = +counter.getAttribute('data-target');
const duration = 2000; // ms
const increment = target / (duration / 16); // 60fps
let current = 0;
const updateCounter = () => {
current += increment;
counter.textContent = Math.floor(current);
if (current < target) {
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target;
}
};
updateCounter();
});
});
</script>
Links:
6. KUTE.js Counter Plugin
KUTE.js is a fully featured JavaScript animation engine with a specific counter plugin for numerical animations.
Key Features:
- Part of a full animation framework
- Multiple easing functions
- Supports decimal places
- Highly customizable
- Consistent performance
Implementation:
<!-- Include KUTE.js core and counter plugin -->
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.2.0/dist/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.2.0/dist/kute-countup.min.js"></script>
<!-- HTML -->
<span id="number">0</span>
<!-- JavaScript -->
<script>
KUTE.fromTo(
'#number',
{ number: 0 },
{ number: 5000 },
{ duration: 2000, easing: 'easingCubicOut' }
).start();
</script>
Links:
7. simplyCountdown.js
simplyCountdown.js is a lightweight (<5KB) countdown/countup library with zero dependencies, offering multiple themes.
Key Features:
- Works as both countdown and countup
- Multiple built-in themes
- Customizable styling
- TypeScript support
- No dependencies
Implementation:
<!-- Include the script -->
<script src="https://cdn.jsdelivr.net/npm/simplycountdown.js@1.7.0/dist/simplyCountdown.min.js"></script>
<!-- HTML -->
<div id="my-counter"></div>
<!-- JavaScript for Count Up -->
<script>
simplyCountdown('#my-counter', {
year: 2020,
month: 5,
day: 15,
countUp: true,
enableUtc: false,
words: {
days: {singular: 'day', plural: 'days'},
hours: {singular: 'hour', plural: 'hours'},
minutes: {singular: 'minute', plural: 'minutes'},
seconds: {singular: 'second', plural: 'seconds'}
}
});
</script>
Links:
8. Odometer by HubSpot
Odometer by HubSpot is a JavaScript and CSS library for smoothly transitioning numbers with a realistic “spinning” effect.
Key Features:
- Smooth spinning transitions
- Responsive design
- Customizable themes
- Support for auto formatting
- Works with any JavaScript framework
Implementation:
<!-- Include Odometer CSS and JS -->
<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-minimal.css">
<script src="https://github.hubspot.com/odometer/odometer.js"></script>
<!-- HTML -->
<div id="odometer" class="odometer">0</div>
<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
odometer.innerHTML = 5000;
}, 1000);
});
</script>
Links:
9. animateNumber jQuery Plugin
animateNumber is a jQuery plugin that animates numbers with various formatting options.
Key Features:
- Easy implementation
- Customizable number formatting
- Support for custom step functions
- Adjustable animation speed
Implementation:
<!-- Include jQuery and the plugin -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.animateNumber.min.js"></script>
<!-- HTML -->
<span id="number">0</span>
<!-- JavaScript -->
<script>
$('#number').animateNumber({
number: 5000,
numberStep: $.animateNumber.numberStepFactories.separator(','),
easing: 'easeInQuad',
duration: 2000
});
</script>
Links:
10. Number-CounteUp
Number-CounteUp is a minimal JavaScript function that creates animated number counters with minimal code.
Key Features:
- Ultra lightweight (about 10 lines of code)
- No dependencies
- Easy to customize
- Simple implementation
Implementation:
<!-- HTML -->
<span id="counter">0</span>
<!-- JavaScript -->
<script>
function animateCounter(id, start, end, duration) {
let startTimestamp = null;
const element = document.getElementById(id);
function step(timestamp) {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentValue = Math.floor(progress * (end - start) + start);
element.innerHTML = currentValue;
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
element.innerHTML = end;
}
}
window.requestAnimationFrame(step);
}
// Initialize counter
animateCounter('counter', 0, 5000, 2000);
</script>
Links:
FAQ
What is the simplest way to implement a counter in JavaScript?
The simplest way is to use a variable and increment/decrement operators. For example:
let count = 0;
function increment() {
count++;
document.getElementById('counter').textContent = count;
}
This basic approach works well for simple applications without state management needs.
How do I create a countdown timer in JavaScript?
You can create a countdown timer using
setInterval()to update the counter at regular intervals. Calculate the time difference between the target date and current date, then display the remaining time. For more sophisticated solutions, libraries like CountdownJS or SimplyCountdown.js offer ready-made solutions with additional features.
What’s the best way to implement a counter in React?
In React, the best practice is to use state management with useState hook for simple counters. For example:
const [count, setCount] = useState(0);and then
setCount(count + 1)to increment. For more complex applications, consider React-specific libraries like React-Counter-Up or using state management solutions like Redux or MobX.
How can I create an animated counter in JavaScript?
For animated counters, you can use requestAnimationFrame() for smooth transitions or leverage libraries like CountUp.js, GSAP, or anime.js. These libraries provide easing functions and timing controls to create visually appealing number transitions from one value to another.
What are closures and how do they relate to JavaScript counters?
Closures are a fundamental JavaScript concept often used in counter implementations. A closure is a function that remembers its outer variables and can access them. For counters, closures help maintain state:
function createCounter(initialValue) {
let count = initialValue;
return function() {
return count++;
};
}
This pattern creates private variables that persist between function calls.
What are some popular JavaScript counter libraries in 2024?
Popular counter libraries in 2024 include:
- CountUp.js – For animated number counting
- Flipdown.js – For flip-style countdown animations
- React-Counter-Up – For React applications
- SimplyCountdown.js – Lightweight countdown solution
- TimeZZ – Clean, customizable countdown timers
How can I make my JavaScript counter persist after page refresh?
To persist counter values after page refresh, use the browser’s storage APIs:
- localStorage – For persistent storage:
localStorage.setItem('count', count); - sessionStorage – For session-only persistence:
sessionStorage.setItem('count', count);
let count = parseInt(localStorage.getItem('count')) || 0;
What are best practices for JavaScript counter performance?
For optimal performance:
- Use requestAnimationFrame instead of setInterval for smoother animations
- Implement throttling/debouncing for rapid counter changes
- Consider using Web Workers for computationally intensive counters
- Minimize DOM updates by batching changes
- Use CSS transitions when possible instead of JavaScript animations
How do I implement a counter that works with user events?
To create an event-driven counter, attach event listeners to the relevant elements:
document.getElementById('increment').addEventListener('click', function() {
count++;
updateDisplay();
});
For more complex interactions, consider implementing observer patterns or using event-driven libraries.
What’s the difference between a counter and a ticker in JavaScript?
A counter typically describes a value that increments or decrements based on user actions or events. A ticker, on the other hand, usually refers to an automatically updating display that changes at regular intervals (like a stock ticker or countdown clock). Tickers often use setInterval or setTimeout to update automatically, while counters may update in response to specific events.
Thoughts
JavaScript countup libraries are powerful tools for enhancing user experience and drawing attention to important metrics on your website. Whether you need a simple solution like PureCounter.js or a more feature-rich library like CountUp.js, the options presented in this article provide versatile tools for implementing engaging numerical animations.
When choosing a countup library, consider your specific needs including:
- Dependencies – Do you want a standalone solution or are you already using jQuery?
- File size – How important is performance for your application?
- Features – Do you need special formatting, easing functions, or theme options?
- Ease of implementation – How quickly do you need to get your solution running?
By choosing the right countup library, you can create impressive, attention-grabbing numerical displays that enhance your website’s visual appeal and effectively communicate important metrics to your users.
