PIT Designs Logo

How to Create Animated Number Counters in Oxygen

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 2 years ago on June 6th, 2020.

Related To:

4 Benefits of Outsourcing Your Payroll

Did you know that you can outsource your payroll? Many business owners are hesitant to outsource this vital task, but doing so has many benefits. Here are four benefits to outsourcing your payroll.

How Can 3D Animated Logos Increase Brand Relevance?

Every company strives to please its consumers. A business uses its resources and strengths to amplify sales, recognition, and growth. […]

Integrating Artificial Intelligence in Mobile Apps Development

Mobile app development is a process of creating mobile apps with the use of computer programming languages, tools and software. […]

Why is PHP Still Important for Web Development?

PHP is one of the most popular programming languages and has been around for over two decades worldwide. PHP has […]

AI vs Machine Learning: What are the Differences?

Within the last decade, the term AI vs machine learning has become buzzwords that are often discussed together, and the […]

A Comprehensive Guide to Creating a Compelling Whiteboard Animation Video

Have you ever seen videos where it appears as though someone is discussing something while writing a story on a […]

8 Reasons Why You Should Hire Remote Workers

As the world moves through its third year of the pandemic, remote working is here to stay as it revolutionises […]

How To Start An Online Business As A Student

Many of you pursuing student life have a high desire to do jobs. In this case, you can’t get enough […]

Animated number counters are seen on many landing pages. They bring a cool effect (movement) to the page and convey some important information or quick facts in numbers.

There are limitless ways to put the number counters to use. Could be projects done, clients, staff, lines of code, etc.

We used 4 animated number counters in Oxygen, when redesigning our landing page for PIT Designs & Consultancy - Melbourne Web Design.

How to Create Animated Number Counters in Oxygen
Number counters sample - as seen on PIT Designs landing page

So let's get started with a step by step tutorial on how to create this cool element in Oxygen, using JS and CSS for styling.

Add Counter-Up JS

For this to work, we will take advantage of jquery.counterup.js by @bfintal. head to https://github.com/bfintal/Counter-Up
And download jquery.counterup.min.js, upload it to your server.

Include Both JS in Code Box

Add Code block in Oxyge, in the HTML section, add two external JS links. First is the one you uploaded from step one.
The second is this
https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js
So you have two JavaScripts now. Refer to the above image.

jQuery to Trigger the Effect

In the same Code Block you added, go to JavaScript section and add this jQuery code:

jQuery(document).ready(function($) {
jQuery('.fancycount').counterUp({
delay: 10,
time: 1500
});
});


This jQuery basically calls the counter up script we added in step one. Which makes the whole thing work.

Add the Numbers

At this point, we have the scripts ready to animate number counters. All that's left is adding a text element, and writing the number we want in.
Add text element, and give it a class of fancycount. as shown in the above image.

Final Step

Duplicate the text element, for as many times as you want, edit each text with a different number. And style it as you wish with CSS.
since you will be using the same class for all text elements, styling one of them, will apply to all.

For any further questions, leave a comment below.