How to Add Eye-Catching Number Count Animations to Your WordPress Website (2024 Guide)
Number count animations are a creative way to display key statistics, milestones, and other metrics on your WordPress website. Rather than showing a static number, these animations count up (or down) to the target number when a visitor scrolls the element into view.
Used strategically, animated counters are an effective way to visualize data, engage visitors, and communicate important information at a glance. You‘ve likely seen them used to show metrics like:
- Number of customers served
- Products sold
- Money raised for a cause
- Downloads of an app or file
- Years in business
- Team members
- Offices or locations
While number count animations aren‘t difficult to implement on a WordPress site, there are right and wrong ways to go about it. Follow the tips and best practices in this guide to learn how to add number count animations to your site the right way.
Why Use Number Count Animations in WordPress?
On top of being just plain cool to look at, number count animations serve a few important purposes in web design:
They catch the user‘s eye and draw attention to important statistics or milestones that might otherwise blend into the page.
Watching numbers rapidly increase builds excitement and positive associations in a way that static numbers can‘t. It more vividly illustrates growth, progress, or scale.
Animated numbers inject a sense of movement, dynamism, and interactivity to a web page that might be lacking if relying on text and images alone.
They provide a break from blocks of text, making a page more visually interesting and the content more digestible.
Like other on-scroll animations, counting numbers entice visitors to keep scrolling to "reveal" them.
Of course, as with any web design element, animated number counters should be used purposefully and not gratuitously. When used correctly, they enhance a page‘s storytelling and visual communication. When overused, they become gimmicky and distracting.
Best Practices for Using Number Count Animations
Before we dive into the technical specifics of implementation, let‘s cover some high-level best practices to keep in mind when using animated counters:
Keep them relevant – Each animated number should support the content around it and relate to the page‘s overall theme. Avoid using them for trivial or disconnected statistics.
Group related stats – If you‘re animating multiple numbers, try grouping related ones together in a single section rather than scattering them down the page. This makes them easier to process.
Don‘t go overboard – Stick to animating a few of the most powerful numbers. Too many counters on a page quickly lose their impact and bog down performance.
Choose readable fonts – Since there‘s movement involved, it‘s extra important to use a legible, high-contrast typeface for your animated numbers. Now‘s not the time to get fancy.
Maintain accessibility – Ensure the animated content is accessible to visitors using screen readers or with JavaScript disabled. Use ARIA attributes and provide static fallbacks.
Test different speeds – The speed of the count animation can influence its emotional impact. In general, faster speeds feel more energetic while slower speeds allow numbers to sink in. Try different timing options to strike the right tone.
Now that we‘ve covered the fundamentals, let‘s look at how to technically implement number count animations on a WordPress site. We‘ll walk through two methods – one using a premium (paid) plugin and the other using a free plugin.
Method 1: Number Count Animations with SeedProd (Paid)
SeedProd is a powerful drag-and-drop WordPress page builder that makes it easy to create custom landing pages, coming soon pages, and other layouts without coding. The Pro version also includes a Counter block for adding animated number counts anywhere on a page.
Here‘s how to get animated numbers up and running with SeedProd:
Step 1: Install and activate SeedProd Pro
If you haven‘t already, purchase a SeedProd Pro license and download the plugin. In your WordPress Dashboard, go to Plugins > Add New and click Upload Plugin. Choose the zipped plugin file you downloaded, then click Install Now and Activate.
On the plugin‘s settings page, enter your license key from your SeedProd account to enable Pro features.
Step 2: Create a new page or edit an existing one
In your WordPress Dashboard, go to the SeedProd > Pages and click Add New Landing Page. You can also edit an existing landing page.
Choose your preferred theme or start with a blank template.
Step 3: Drop the Counter block into your layout
In the SeedProd builder, find the Counter block in the Advanced Blocks section. Drag it onto your page and drop it where you want the animated number to appear.
You can resize the Counter like any other block and drag in additional Counters to create a row or grid.
Step 4: Customize counter settings
With a Counter selected, look at the Block Settings panel to customize:
Starting number: The number to start counting from (usually 0).
End number: The target number to count up to.
Prefix and suffix: Add any characters before or after the animating number (like a currency symbol).
Heading: Enter text to appear below the counter (like a label or caption).
Under the Advanced tab, you can further style your counter by modifying colors, spacing, typography, border, and more.
Step 5: Adjust page settings and publish
If desired, customize other page-level settings under the Page Settings panel. These include SEO, analytics, custom scripts, and more.
Click Publish to make your page (and animated counters) live. View the page on the front end and scroll the counter into view to test the animation.
Method 2: Number Count Animations with Counter Number (Free)
If you‘re looking for a zero-cost way to implement number count animations, Counter Number is a solid choice. This free plugin makes it easy to create and customize counters, then add them to pages via shortcodes.
Here‘s how it works:
Step 1: Install and activate Counter Number
In your WordPress Dashboard, go to Plugins > Add New and search for "Counter Number." Find the listing, then click Install Now and Activate.
Step 2: Create a new counter
From the WordPress Dashboard, go to the new Counter Numbers menu item and click Add Counter.
Enter a title for your counter group at the top (this is just for reference). Choose Default Template to access the basic settings.
Step 3: Customize counter content
Under Counter Number Details, specify:
- Counter Number Title: The text to appear below the number
- Counter Number Icon: Use the dropdown to select an icon
- Counter Number Value: The target number to count up to
To create additional counters as part of the same group, click Add New Counterbox. There‘s no limit to how many you can add.
Under the Content tab, you can optionally enter text to appear above or below your counter group.
Step 4: Style counters
Using the settings on the right side panel, you can customize the look and feel of your counters. Options include:
- Margins and padding
- Background color
- Title color and typography
- Number color and typography
- Icon graphic, color, and size
- Counter group width and alignment
The real-time preview will update as you make changes. When you‘re happy with the appearance, click Publish.
Step 5: Add counter to a page or post
Counter Number uses shortcodes to output your animated counters on the front end. After you publish a counter, copy the shortcode from the All Counters screen.
Open up any page or post in the WordPress editor. Drop in a Shortcode block and paste your counter‘s shortcode.
Save or publish the page, then view it on the front end. You should see your animated counters in action.
Customizing with CSS Animations
If you want to further customize your number count animations, you can use custom CSS to fine-tune the timing, easing, and more. This gives you more control than you get with a plugin‘s built-in settings.
Both SeedProd and Counter Number automatically assign a CSS class to each counter element. You can hook into these to apply your own CSS animation rules.
For example, the following CSS will give counters a "breathe in" effect as they begin counting up:
@keyframes count {
0% {
transform: scale(1.1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.seedprod-counter {
animation: count 1s ease-out;
}
.cn-content {
animation: count 1s ease-out;
}The @keyframes rule defines the animation, specifying the starting and ending styles. The .seedprod-counter and .cn-content selectors target SeedProd and Counter Number counters respectively.
You can customize the timing and iterations with additional properties like:
animation-duration: 2s;
animation-iteration-count: 2;
animation-direction: alternate;To add your custom CSS, you can use the Additional CSS field in the WordPress Customizer, or a plugin like Simple CSS.
Boosting Performance
Animated content can get resource-intensive, especially if you‘re animating multiple counter elements or other content simultaneously. A few tips to keep your number animations speedy:
Limit the number of counters – Avoid bogging down performance by keeping your counters to just a few key statistics per page.
Use efficient animation techniques – CSS animations are generally more performant than JavaScript, especially when targeting few elements. Stick to simple transforms like scale and opacity rather than animating properties like height or width.
Lazy load when possible – If counters aren‘t immediately visible on page load, use lazy loading to defer animation until the element is nearly in view. SeedProd supports lazy loading out of the box.
Compress other page resources – Optimize the rest of the page by compressing images, minifying scripts, using system fonts, and following other performance best practices. This ensures there‘s "room" for number animations to run smoothly.
Test on different devices – Always test animation performance on a range of devices and network speeds. What looks smooth on your development machine may stutter on a mobile phone. Use Chrome DevTools to simulate and debug.
Accessibility Considerations
Whenever you use animated content on a website, it‘s important to ensure the core content and functionality remains accessible to all visitors. Some key considerations:
Provide a static fallback – Make sure the actual statistic displays and makes sense even if the number animation fails or is disabled. You can accomplish this by including the static number in the HTML and using CSS/JavaScript to progressively enhance with animation.
Use ARIA attributes – To communicate the animated content to screen readers, apply the appropriate ARIA roles and labels to counter elements. For example:
<div class="counter" role="figure" aria-label="Total Donations Raised">
<div class="total" aria-hidden="true">$90,000</div>
<div class="label">Total Donations Raised</div>
</div>Here the parent <div> uses role="figure" to indicate that the counter is a self-contained piece of content. The aria-label describes the counter‘s purpose. The animated number itself gets aria-hidden="true" so it‘s ignored by assistive technologies (since it‘s decorative). The static label displays either way.
Allow animation disabling – Some visitors may prefer to reduce non-essential animations due to visual impairments or cognitive issues. Honor the prefers-reduced-motion media query so animations are automatically disabled for users who have indicated that preference:
@media (prefers-reduced-motion) {
.counter {
animation: none;
}
}By following these accessibility practices, you ensure that everyone can access and benefit from your animated number counters, regardless of ability or technology.
Creative Use Cases
Aside from the common applications mentioned earlier, there are plenty of other creative ways to use number count animations in your web design:
Progress bars – Animate a number along with a progress bar visualization to show progress toward a goal.
Countdown timers – Animate a descending number to add urgency to a limited time offer or upcoming event.
Interactive polls – Let visitors vote on a poll, then animate the percentage totals in real time.
Animated pricing – Gradually reveal a discounted price point to highlight savings.
Fundraising thermometers – Fill up a thermometer animation and total as donations roll in.
Social proof – Display real-time signups, downloads, or purchases to tap into FOMO.
Dynamic infographics – Combine animated statistics with charts, icons, and other visual aids to tell data-driven stories.
The key is to get creative and experiment. Number animations are a versatile tool in your web design toolbox.
Alternatives to Plugins
The two WordPress plugins covered in this post are great options for adding number count animations to your site without having to write any code. But they‘re not the only options.
Some other techniques you might consider:
JavaScript libraries – Libraries like CountUp.js and anime.js provide lightweight, customizable number animations you can trigger with a few lines of JavaScript. This is a good option if you need more control than a plugin provides.
Gutenberg blocks – If you‘re using the Block Editor in WordPress 5.0+, you may be able to find a suitable number counter block. Options include Animated Numbers and Responsive Count Up. Just install the block plugin and drop it into your page or post.
DIY with CSS – If you‘re comfortable with front-end code, you can create simple number animations with pure CSS. The basic approach is to use a CSS @keyframes rule to transition the number from 0 to the final value. There‘s more manual setup involved, but it‘s the most lightweight, customizable solution.
Whichever implementation you choose, the same basic concepts and best practices apply. Start with a specific goal in mind, keep animations subtle and purposeful, and always prioritize performance and accessibility.
Conclusion
Number count animations are a powerful way to bring statistics to life on your WordPress site. When used strategically, they catch visitors‘ attention, make key metrics more impactful, and add a level of polish to your pages.
As we‘ve seen, implementing number animations on a WordPress site is quite straightforward. For a no-code solution, you can use a premium plugin like SeedProd or a free one like Counter Number. If you need more flexibility, you can code your own animations with CSS or JavaScript.
Whichever approach you choose, remember to:
- Use animations to support your content, not distract from it
- Customize styling to match your site‘s branding
- Keep an eye on performance, especially with multiple counters
- Ensure the animated content is fully accessible
- Get creative with your use cases and placements
Done right, number animations add a professional, intriguing design detail that makes your WordPress site more engaging and memorable. Experiment with the tools and techniques covered here to start putting your data in motion.
