Adding simple animated numbers that count up to the Squarespace website
Counters with numbers are stunning, engaging components that count up from zero to any number. They’re commonly used on portfolio sites, agency homepages, and nonprofit landing pages, providing a visual means to highlight key stats such as projects completed, clients served, or years in business.
Because numbers by themselves can be ignored, yet numbers in motion demand attention. This small motion brings your site to life and can give form to trust and professionalism.
The Advantages of Animated Number Counters on Your Squarespace Website
Draw the Eye: It’s the numbers that are moving—of course, you’re going to look at them.
Establish Trust: Authentic data creates trust and credibility.
Call out Accomplishments: Highlight important stats that may indicate success.
Increase Engagement: Elements that encourage users to interact and engage help keep them on your site.
Whether you’re a designer, consultant, coach, or entrepreneur, these counters are a quick and slick way to showcase progress.
How Animated Counters Work: A Quick Overview
Three simple components power the animated counter effect:
HTML: Places the number element on your page.
CSS: Styles the element for visual consistency.
JavaScript: Adds the animation effect when the element scrolls into view.
Together, these pieces create a smooth, automatic counting animation that starts when the user sees it.
Step-by-Step: How to Add Animated Counters in Squarespace 7.1
You don’t need a plugin or a developer to add this feature. Just follow these easy steps:
<section>
<div class="container">
<div class="counter_wrapper">
<div class="counter_item">
<span class="counter" data-number="10" data-speed="0.5"></span>
<span class="count_span">+
</div>
<div class="counter_item">
<span class="counter" data-number="150" data-speed="100"></span>
<span class="count_span">+
</div>
<div class="counter_item">
<span class="counter" data-number="15" data-speed="0.6"></span>
<span class="count_span">+
</div>
</div>
</div>
</section>
2. Add the CSS (Design → Custom CSS)
.counter_wrapper{
display: flex;
justify-content: space-around;
}
.counter_item{
width: 270px;
border-right: 1px dashed #A7A7A769;
}
.counter_item:last-child{
border-right: 0 !important;
}
.counter_item span{
font-size: 56px;
font-family: 'Gilroy-SemiBold';
//font-weight: 500 !important;
line-height:1.4rem;
}
.counter_item p
{
font-size: 24px;
color: #b0b0b0
}
3. Add the JavaScript (Settings → Advanced → Code Injection → Footer)
<script>
let counter = document.querySelectorAll(".counter")
let arr = Array.from(counter)
arr.map((item)=>{
let count = 0
function CounterUp(){
count++
item.innerHTML = count
if(count == item.dataset.number){
clearInterval(stop);
}
}
let stop = setInterval(
function(){
CounterUp();
},100/item.dataset.speed
);
})
</script>
How to Use It:
Add the HTML where you want the counters to appear (via Code Block)
Add the CSS to style it inside Design → Custom CSS
Paste the JavaScript inside Settings → Advanced → Code Injection → Footer
Save, publish, and scroll — the numbers will animate into view!
Customization Options:
Set another final value by changing data-target
Adjust font size, colour , or arrangement in CSS
Try using another form of delay or easing (setTimeout or similar)
Count down instead? Reverse the math
Scroll to trigger the popover or only once? Tweak the scroll logic
Final Thoughts:
Animated numbers can be a cool way to get stats and other information in front of your site visitors, not to mention they can make a heavy-duty impact when it comes to boosting the visual impact of your content and making it more interactive. This way, you don’t need any plugins, just your HTML, CSS, and a little bit of lightweight JavaScript, with support for all modern browsers and even some old ones.
Frequently Asked Questions
1. What is an animated number counter?
An animated counter is a graphical element that animates a counter of numbers ticking up to any given number as a user scrolls to it. It adds movement and emphasis to critical data on your website, such as the client
2. Will animated counters work on any Squarespace template?
Yes! You can use this on any of the Squarespace 7.1 templates. Because it’s built with standard HTML, CSS, and JavaScript, it works on all 7.1 sites with or without Developer Mode or third-party plugins.
3. Will the counters continue to loop, or will they only animate once?
By default, the timer goes off once when the page is loaded. Also, if you need the counters to animate only when they have reached view, you can have some scroll detection logic incorporated using IntersectionObserver.
4. Can I change the speed of the animation or the target number?
Absolutely. Each counter has:
data-number → your target number (e.g., 100, 250, 500)
data-speed → how fast it animates (lower = faster)
You can customize both of these values per counter block.
5. How can I modify the font, size, or color of the counter?
You can style your counters in Design → Custom CSS. For example:
.counter_item span {
font-size: 48px;
color: #222;
font-family: 'YourFontName', sans-serif;
}
6. Can I add counters to any section in a page, even those with images and videos?
Yes. You can place the counter HTML on any Code Block, which also works from within banners, galleries, or split sections. Just make sure the container is sufficiently padded and has enough contrast to be visible.
7. Is this method mobile responsive?
Yes, but you can enhance responsiveness with a media query. Example:
@media(max-width: 768px) {
.counter_wrapper {
flex-direction: column;
align-items: center;
}
}
8. Can I make the counter count down instead of up?
Yes. You’ll just need to tweak the JavaScript:
let count = item.dataset.number;
function CounterDown() {
count--;
item.innerHTML = count;
if (count == 0) {
clearInterval(stop);
}
}
