No. Waypoints is optional and helpful on older jQuery sites. Modern browsers support IntersectionObserver, which provides a small, dependency-free way to trigger the animation on scroll.

Counter-Up jQuery Plugin

Q: Does Counter-Up work on mobile?

Yes. Counter-Up is lightweight and runs well on mobile browsers. Use IntersectionObserver or Waypoints to trigger the animation when elements enter the viewport, keep durations short (around 1 second), and apply responsive type so numbers remain legible on small screens.

Q: Can I run multiple counters on the same page?

Yes. Target a shared class like .counter and initialize them together. Each element animates independently. For one-time animations as users scroll, attach an IntersectionObserver and unobserve each element after it animates to avoid repeated runs.

Q: How do I add commas or a currency symbol?

Animate the raw number first, then format the final text with toLocaleString for thousands separators and add a currency prefix or suffix as needed. Keep the element’s initial text numeric so the plugin can count accurately.

Q: Does it support decimals and percentages?

Yes. If the element contains a value like 98.6 or 98%, Counter-Up detects and animates it smoothly. Include the percent symbol in the text for percentages. For decimals, you can round or reformat after the animation if you need a specific precision.

Q: Why isn’t my counter starting?

Confirm script order (jQuery before Counter-Up), ensure your selector matches the elements, and verify the counters aren’t hidden at initialization time. If numbers load dynamically, initialize after content insertion or observe when elements become visible.

Q: Can I replay the animation?

Yes. Re-initialize the plugin on the element or re-observe it with IntersectionObserver. For most designs, a single play per view is best to avoid distraction.

A crisp, dependable way to animate numbers without pulling in a framework. If your site already includes jQuery, the Counter‑Up plugin is a light touch that delivers the classic count‑up effect in minutes. This guide covers setup, triggers, and formatting for counter up js on legacy and mixed stacks. If you’re on a modern build, you might also compare the vanilla approach in our CountUp.js quick start or review broader patterns in the number counter animation guide.

Use this when you want a fast, readable solution that plays nicely with existing themes and templates. Skip it when you’re going all‑in on frameworks or want physics‑style rolls—then look at Odometer or CountUp.

Overview

Counter‑Up is a small jQuery count up plugin that reads the number inside an element and animates it from zero to that value. It’s ideal for:

Legacy/jQuery sites where adding one more tiny plugin is simpler than refactoring.
Simple KPI blocks on homepages, feature grids, or pricing pages.
Low‑friction installs: CDN, a line of initialization, done.

If you need a vanilla alternative or richer formatting, consider CountUp.js. We link to a migration path below.

Add Counter‑Up to your site via MicroEdits

You don’t have to touch code or hunt through theme files. MicroEdits lets you describe what you want—animate these numbers when they scroll into view—and it makes the change right on your existing website.

Describe the change: which numbers should animate and how fast.
Instant preview: see it live on your site’s URL, then share the preview.
One‑click apply: publish the change. If you change your mind, revert just as easily.
Works on any platform: WordPress, Shopify, Webflow, custom stacks—no theme edits required.

It’s a chat, not a control panel. Tell it what to do in plain English and watch the result. No ZIP uploads, no merges, no copy‑paste.

enter any website

Setup and initialization

Counter‑Up relies on jQuery. Many sites already include it. If yours does, you only need the plugin file. If not, include jQuery first, then Counter‑Up. Script order matters.

Below are copy‑ready CDN tags. Paste them near the end of your page, after your content. Keep the order as shown.

&lt;!-- jQuery (required) --&gt; &lt;script
src="https://code.jquery.com/jquery-3.7.1.min.js"&gt;&lt;/script&gt; &lt;!--
Counter-Up (jQuery plugin) --&gt; &lt;script
src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"&gt;&lt;/script&gt;
&lt;!-- Waypoints (optional, for built-in scroll triggers) --&gt; &lt;script
src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"&gt;&lt;/script&gt;

A minimal counter up example:

<!-- Markup -->
<section class="stats">
  <div><span class="counter">1250</span> Customers</div>
  <div><span class="counter">98</span>% Satisfaction</div>
  <div><span class="counter">24</span> Countries</div>
</section>

Initialize the plugin once the page is ready:

// Basic init
$(function () {
  $(".counter").counterUp({
    delay: 16, // ms between increments (≈60fps)
    time: 1000, // total animation time in ms
  });
});

Notes:

If Waypoints is present, Counter‑Up can hook into it for in‑view behavior.
Without Waypoints, you can trigger with IntersectionObserver (below).
jQuery’s ready shortcut is documented at jQuery ready.

Scroll triggers

You usually want the animation to start when the numbers enter the viewport, and only once.

Two patterns work well:

Waypoints pattern (classic jQuery stacks). Include Waypoints and let Counter‑Up trigger when the element is scrolled into view. Docs:
Waypoints
.
IntersectionObserver pattern (modern browsers). No extra dependency. Docs:
MDN IntersectionObserver
.

IntersectionObserver example (single‑run on first view):

document.addEventListener("DOMContentLoaded", function () {
  const counters = document.querySelectorAll(".counter");

  const observer = new IntersectionObserver(
    (entries, obs) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        $(entry.target).counterUp({ delay: 16, time: 1000 });
        obs.unobserve(entry.target); // run once
      });
    },
    { threshold: 0.3 }
  );

  counters.forEach((el) => observer.observe(el));
});

Tip: If your counters are hidden behind tabs/accordions on load, trigger the animation when the panel opens.

Styling and formatting

Make the numbers look intentional. A few small touches go a long way.

Typography. Align digits for a steady animation:

.counter {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
}

Decimals. Put the final value (e.g., 1234.56) in the element. Counter‑Up will animate fractional values smoothly.
Thousands separators. Counter‑Up focuses on speed; if you want commas or locale formatting, apply them right after the animation ends:

function addThousands(el, locale = navigator.language) {
  const n = Number(el.textContent.replace(/,/g, ''));
  if (!Number.isNaN(n)) el.textContent = n.toLocaleString(locale);
}

  $(function () {
  const DURATION = 1000;
  $('.counter').each(function () {
  const el = this;
  $(el).counterUp({ delay: 16, time: DURATION });
  setTimeout(() => addThousands(el), DURATION + 50);
  });
  });

  ```

  ```

- <strong>Contrast</strong>. Counters often sit on photography. Add a soft text
  shadow or a high‑contrast color token so the numbers stay readable.

## Migration tips

If you’re refactoring or starting fresh, consider a modern, dependency‑free library:

- <strong>CountUp.js</strong> for flexible formatting (prefix/suffix, easing,
  separators) and no jQuery dependency. See our
  <a href="/number-counters/count-up-js">CountUp.js quick start</a>.
- <strong>Odometer‑style</strong> animations when you want rolling digits.
  Compare approaches in the
  <a href="/number-counters/number-counter-animation">
    number counter animation guide
  </a>
  .

Rule of thumb: keep Counter‑Up when jQuery is already there and you want a tiny, predictable diff. Move to CountUp.js when you’re gradually shedding jQuery.

## Troubleshooting

- <strong>Two copies of jQuery</strong>. If you see <q>$ is not a function</q>,
  remove the duplicate or use <em>noConflict</em> mode judiciously. See
  <a
    href="https://api.jquery.com/jquery.noconflict/"
    target="_blank"
    rel="noopener noreferrer"
  >
    jQuery.noConflict
  </a>
  .
- <strong>Script order</strong>. Load jQuery first, Counter‑Up second, Waypoints
  (if used) after those. Out‑of‑order scripts cause silent failures.
- <strong>Hidden on load</strong>. Counters inside tabs/accordions may measure
  as <q>not in view</q>. Trigger when the panel is opened, or re‑observe on
  visibility change.
- <strong>Dynamic content</strong>. If your numbers are injected after page load
  (AJAX/CMS blocks), initialize after insertion.
- <strong>Performance</strong>. Keep <em>delay</em> near 16ms and <em>time</em>
  around 0.6–1.5s. Longer runs feel sluggish and repaint more.

## FAQ

#### Does Counter‑Up work on mobile?

Yes. It’s lightweight and runs fine on mobile browsers. Use IntersectionObserver or Waypoints to start the animation when the element comes into view. Keep durations short (about 1 second) and use larger, responsive type via CSS clamp so the numbers remain legible on small screens.

#### Can I run multiple counters on the same page?

Absolutely. Target a class like <q>.counter</q> and initialize them together. The plugin loops through each element and animates independently. For single‑run behavior as the user scrolls, attach an IntersectionObserver and unobserve each element after it animates.

#### How do I add commas or a currency symbol?

Counter‑Up animates the raw number quickly. After it finishes, format the text node with <q>toLocaleString</q> for separators, and prepend a currency glyph if needed. Keep the element’s original text numeric so the plugin counts correctly, then apply the visual formatting after completion.

#### Does it support decimals and percentages?

Yes. If your element contains <q>98.6</q> or <q>98%</q>, Counter‑Up detects and animates appropriately. For percentages, include the percent sign in the element’s text. For decimals, it increments smoothly; round or format at the end if you need a specific precision.

#### Do I need Waypoints?

No. Waypoints is optional. It’s a convenient trigger on older jQuery sites, but modern browsers provide IntersectionObserver, which is smaller and requires no extra dependency. Choose one approach and avoid mixing both on the same elements.

#### Why isn’t my counter starting?

Check three things: jQuery loaded before Counter‑Up, the selector actually matches your elements, and the container isn’t hidden at init time. If you’re injecting numbers dynamically, initialize after the content is present, or re‑run the observer when the DOM updates.

#### Can I replay the animation?

Yes. Call the initialization on the element again, or remove and re‑add the element to your observer. For most UX, a single play per view feels best—replays on every scroll can read as noise.