How to Create Animated Count-Up Numbers in Funnelish (No Plugin Needed)

Ask the community
, , ,
1

If you want to make your Funnelish landing pages feel more dynamic and premium, one small effect that works really well is animated statistics.

For example:

  • 3,200+

  • $84M+

  • 127K+

  • +28.4%

Instead of showing the final number immediately, we can animate it from 0 to the final value when the section becomes visible on screen.

The best part:

  • No plugin needed

  • Works inside Funnelish

  • Keeps symbols like $, %, K, M, and +

  • Only runs once

  • Mobile friendly

Step 1 — Add a Class to Your Numbers

Select the text element that contains your number.

Example:

3,200+

Then add this class:

count-up

So your element should look like:

<h2 class="count-up">3,200+</h2>

Do this for all numbers you want to animate.

Examples:

<h2 class="count-up">$84M+</h2>

<h2 class="count-up">127K+</h2>

<h2 class="count-up">+28.4%</h2>

Step 2 — Add the JavaScript Code

Go to:

Page Settings → Custom JS/Footer Code

Then paste this code:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const counters = document.querySelectorAll(".count-up");

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;

      const el = entry.target;

      // Prevent running multiple times
      if (el.dataset.animated) return;
      el.dataset.animated = "true";

      const originalText = el.textContent.trim();

      // Extract number only
      const numberMatch = originalText.match(/[\d,.]+/);

      if (!numberMatch) return;

      const rawNumber = numberMatch[0].replace(/,/g, "");
      const target = parseFloat(rawNumber);

      // Preserve prefix/suffix
      const prefix = originalText.substring(0, numberMatch.index);
      const suffix = originalText.substring(
        numberMatch.index + numberMatch[0].length
      );

      const duration = 2000;
      const startTime = performance.now();

      function animate(currentTime) {
        const progress = Math.min((currentTime - startTime) / duration, 1);

        const current = target * progress;

        // Keep decimals if original has decimals
        const formatted =
          rawNumber.includes(".")
            ? current.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })
            : Math.floor(current).toLocaleString();

        el.textContent = `${prefix}${formatted}${suffix}`;

        if (progress < 1) {
          requestAnimationFrame(animate);
        } else {
          el.textContent = originalText;
        }
      }

      requestAnimationFrame(animate);

      obs.unobserve(el);
    });
  }, {
    threshold: 0.4
  });

  counters.forEach(counter => observer.observe(counter));
});
</script>

How It Works

When the user scrolls to the section:

  • The number starts from 0

  • Counts smoothly to the final value

  • Keeps all symbols automatically

So:

$84M+

animates like:

$0 → $84M+

without breaking the formatting.

Bonus Tip

This effect works really well for:

  • Revenue numbers

  • Customer counts

  • Order statistics

  • Performance metrics

  • Trust-building sections

Small animations like this can make a landing page feel much more polished and interactive.

1 Like