Scroll-Based Number Animation with jQuery Counter Animate Plugin

jQuery Counter Animate is a lightweight jQuery plugin that animates numbers within your HTML into a smooth, configurable count-up animation.

It extracts numeric values from your content and smoothly animates them from zero while preserving all surrounding formatting like currency symbols, commas, and suffixes.

It's ideal for things like "stats" sections on marketing pages, dashboard metrics, or any place you want to draw a user's attention to a specific figure without being intrusive.

Features:

• Scroll-triggered animation that fires only when elements enter the viewport
• Lightweight footprint with minimal performance impact
• One-time animation per page load to avoid repetitive triggers
• Customizable animation duration
• Works with multiple numbers within a single element
• Uses requestAnimationFrame for smooth, performant animations

How to use it:

1. Download the plugin and load the jquery.numberAnimate.js script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.numberAnimate.js"></script>

2. Add the number you want to animate to the web page. The plugin will parse the text inside this element.

<div class="js-counter">Revenue: $1,234,567.89</div>
<div class="js-counter">Users: 45,678</div>
<div class="js-counter">Growth: 23.5%</div>

3. Call the numberAnimate() method on your selected element.

$(function () {
  $('.js-counter').numberAnimate();
});

4. Configure the duration of the count-up animation. Defaults to 2000ms.

$('.js-counter').numberAnimate({
  duration: 3000
});

How it works:

When you initialize it on an element, it attaches a scroll and resize event listener to the window. This listener continuously calls the isInViewport function, which uses getBoundingClientRect() to check if the element has entered the visible area of the browser.

Once the element is visible, the core animation logic kicks in. The plugin uses a regular expression—(\d+(\.\d+)?)—to find every numerical value within the element's text content.

For each number it finds, it replaces the original text with a <span> element. The target number and its decimal precision are stored in data- attributes on that new span. This prepares the element for the actual animation without losing the original values.

The animation is handled by requestAnimationFrame. It tells the browser to run the update logic on the next available paint cycle, which is far more performant than using something like setInterval.

The update function calculates the elapsed time against the total duration, determines the current value, and updates the <span>'s text content. It uses toFixed() to ensure the decimal precision matches the original number.

Finally, once an element has been animated, a flag (animated = true) is set, and the scroll/resize event listener for that specific element is detached using $(window).off(). This prevents the plugin from doing useless work after its job is done.

FAQs

Q: Can I animate multiple numbers inside one element? A: Yes. The plugin's regex finds all numerical values within the selected element and animates each one independently. An element like <p class="js-counter">$100.00 and 50%</p> will animate both 100.00 and 50.

Q: What happens if the element is already in view on page load? A: The plugin runs its viewport check once upon initialization. If the element is already visible, the animation will start immediately.

Q: What happens if my content has no numbers? A: The plugin silently exits without errors. It checks for numeric matches before proceeding with any DOM manipulation, so non-numeric content remains completely unchanged.

---

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