How to Add a Count-Up Numbers Effect in Squarespace

You know those websites where the big numbers on the page count up from zero as you scroll to them? 250+ websites launched, 98% happy clients, that kind of thing?

They look slick, they grab attention, and they make your results feel a lot more real than a number just sitting there. And the good news is you can add them to your Squarespace site with one Code Block and about five minutes of copy and paste.

No plugin, no developer, no stress. Let’s dive in!

What we are building

A row of stats that sit at zero until the visitor scrolls them into view. Then they count up to your real number in about two seconds, slowing down gently at the end so it feels smooth rather than robotic.

A few things worth knowing before we start:

• It counts only once, so it will not keep restarting every time someone scrolls past.
• It handles prefixes (like a dollar sign), suffixes (like a plus or percent sign) and decimals.
• If someone’s browser is very old, they simply see the final numbers. Nobody gets left with a row of zeros.

How to add it in Squarespace 7.1

1. Open the page where you want the numbers and click Edit.
2. Hover over the section you want to add them to and add a new block (look for the Add Block option or the little plus that appears between blocks).
3. Choose the Code block from the list.
4. Make sure the Display Source option is turned off, otherwise Squarespace will show your code as text instead of running it.
5. Paste in the code below and save.

Menu names move around now and then, so if something is labeled a little differently on your site, look for the same idea: add a block, pick Code, paste.

The code

<div class="sdl-stats">
  <div class="sdl-stat">
    <span class="sdl-num" data-count="250" data-suffix="+">0</span>
    <p>Websites launched</p>
  </div>
  <div class="sdl-stat">
    <span class="sdl-num" data-count="98" data-suffix="%">0</span>
    <p>Happy clients</p>
  </div>
  <div class="sdl-stat">
    <span class="sdl-num" data-count="4.9">0</span>
    <p>Average rating</p>
  </div>
  <div class="sdl-stat">
    <span class="sdl-num" data-count="12000" data-prefix="$">0</span>
    <p>Saved for clients</p>
  </div>
</div>

<style>
.sdl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; text-align: center; }
.sdl-num { display: block; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; }
.sdl-stat p { margin: 8px 0 0; }
</style>

<script>
(function () {
  var nums = document.querySelectorAll('.sdl-num');
  var duration = 2000; // how long the count takes, in milliseconds

  function format(el, value) {
    var decimals = (el.getAttribute('data-count').split('.')[1] || '').length;
    var text = value.toLocaleString(undefined, {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });
    return (el.getAttribute('data-prefix') || '') + text + (el.getAttribute('data-suffix') || '');
  }

  function countUp(el) {
    var end = parseFloat(el.getAttribute('data-count'));
    var start = null;
    function step(now) {
      if (start === null) start = now;
      var progress = Math.min((now - start) / duration, 1);
      var eased = 1 - Math.pow(1 - progress, 3); // starts fast, slows down at the end
      el.textContent = format(el, end * eased);
      if (progress < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  // Older browsers: just show the final numbers
  if (!('IntersectionObserver' in window)) {
    nums.forEach(function (el) { el.textContent = format(el, parseFloat(el.getAttribute('data-count'))); });
    return;
  }

  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        countUp(entry.target);
        observer.unobserve(entry.target); // only count once
      }
    });
  }, { threshold: 0.4 });

  nums.forEach(function (el) { observer.observe(el); });
})();
</script>

One small gotcha: Squarespace does not run Code Block scripts while you are editing. To see the animation, save your page and open it in a normal browser tab (or use the Preview option). That is the number one reason people think it is broken when it is not!

Changing the numbers

Each number is a little span with a few settings written on it. Edit these and you are done:

To add a fifth stat, copy one of the sdl-stat blocks and paste it right below the last one. To make the count slower or faster, change the duration number near the top of the script. It is in milliseconds, so 2000 is two seconds.

Making it match your site

The numbers pick up your site’s body font by default. If you would like them to use your heading font or a brand color, add a few lines to the style part of the code. For example:

.sdl-num { font-family: inherit; color: #995d29; }

Want the font to match your headings exactly? Right-click one of your headings, choose Inspect, and copy the font-family value you see there into the line above.

Common problems

The numbers stay at zero

Nine times out of ten, this is the editor not running scripts. Open the live page instead. If it is still stuck, double check that Display Source is off and that you copied the whole code, including the very last </script> line.

The numbers show as plain text with code around them

That is Display Source being switched on. Switch it off and save.

It counts before I can see it

The count starts when about 40% of the stat is on screen. If you have the stats near the very top of the page, they will start counting as soon as the page loads, which is usually exactly what you want.

I have two sets of stats on one page

No problem. Add the code to each Code Block, or keep the script in just one and put the rest of the HTML into the other block. Every number that has the sdl-num class gets picked up.

Prefer not to touch code?

If you would rather set this up with a visual builder, our Number Counter plugin gives you a visual config generator and styling that matches your theme. Take a look at our plugin collection to see what is available.

Want more snippets like this one? Browse the Code Vault, our library of ready-to-paste Squarespace code, with one payment and lifetime access.

Why this post? It answers one of the questions Squarespace users ask most in the community forums. The code above is free to use and change, and every snippet was tested before we published it.