Numbers That Count When Scrolled Into View - jQuery counterup.js

Counterup is a lightweight jQuery plugin that allows you to quickly generate animated counters using HTML data attributes. It animates numbers from zero (or any numeric value) to a defined value when the element enters the viewport.

Features:

• Scroll-triggered animations.
• Customizable target number.
• Adjustable animation duration.
• Prevents counter restart on scroll with intelligent viewport detection

Use Cases:

• Dashboard Statistics - Perfect for emphasizing key metrics on admin dashboards or business intelligence interfaces where you want to draw attention to important KPIs and performance indicators.
• Landing Page Metrics - Highlight impressive company statistics (customers served, years in business, projects completed) with animations that engage visitors as they scroll through the page.
• Fundraising Progress - Display donation goals or campaign progress in a fashion way that makes numerical achievements more visually impactful than static numbers.
• Skills/Experience Sections - In portfolios or resumes, represent skill proficiency or years of experience with animated counters that draw the viewer's attention.

How to use it:

1. Include jQuery and the CounterUp plugin on your webpage. Make sure jQuery is loaded before CounterUp.js

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/counterup.js"></script>

2. Create HTML elements with the numbers you want to animate. Apply the .counter class to these elements and set the initial visible value to zero. Use data attributes to specify the target number and animation duration in milliseconds:

<h1 class="counter" data-target="7500" data-duration="2300">0</h1>
<h1 class="counter" data-target="9500" data-duration="2100">0</h1>
<h1 class="counter" data-target="1500" data-duration="2200">0</h1>
...

3. Initialize the CounterUp plugin by calling the counterUp() method on your counter elements:

$(document).ready(function() {
  $(".counter").counterUp();
});

Performance & Best Practices

• Reasonable Durations: Extremely short durations can be jarring, and very long ones can be tedious. I generally find durations between 800ms and 3000ms work best.
• Integer Values: The plugin is designed for integers. While you could technically use decimals, the animation might not be perfectly smooth, as it relies on Math.ceil.
• Large Numbers: The plugin relies on the setInterval method. The default step calculation ensures a generally smooth animation, but be mindful that a large number that is configured with a very short animation might introduce jank, for extreme cases consider preformatting.

Comparison with Alternatives

• Pure CSS Transitions/Animations: You could animate a counter using CSS, but it gets tricky. You'd likely need to use JavaScript to change CSS variables or classes, and controlling the timing and scroll-triggering would be more complex. counterup provides a much simpler solution for this specific use case.
• Odometer.js: Odometer is another JavaScript library for number transitions. It offers more visual customization options (like different themes and rolling effects) than counterup. However, it's also a larger library. If you only need a basic count-up animation, counterup is a more lightweight choice.
• Waypoints.js: Waypoints is a more general-purpose library for triggering actions when elements scroll into view. You could combine Waypoints with a custom animation function to create a counter. This gives you more flexibility, but it also requires more code and setup.

The main advantage of counterup is its minimalism. It's ideal when you want a simple, easy-to-use counter without the overhead of a larger library. If you need more advanced features like different animation styles or complex easing, Odometer.js might be a better choice. If you need to trigger other actions on scroll, in addition to the counter, Waypoints.js plus a custom animation function would be the way to go.

See Also:

• 10 Best Countup Timer Plugins In JavaScript
• 10 Best Countdown Timer Plugins In JavaScript

---

This awesome jQuery plugin is developed by nayem-1145. For more Advanced Usages, please check the demo page or visit the official website.