[Resolved] Animated Numbers

[chris]

Hi there im making a container to hopefully display previous number of completed commissions,

Would it work if i put the text in the container then gave the container a CSS class to use the following with?

@property –num {
syntax: “<integer>”;
initial-value: 0;
inherits: false;
}

div {
animation: counter 5s infinite alternate ease-in-out;
counter-reset: num var(–num);
font: 800 40px system-ui;
padding: 2rem;
}
div::after {
content: counter(num);
}

@keyframes counter {
from {
–num: 0;
}
to {
–num: 100;
}
}

The idea is to have the 2 or three different numbers whatever they are, count up to what is imput, EG

If i have 5 jobs completed, i wish when a user scrolls to that container for the number to start at 0 and end at how ever many jobs i input?

Hope that make sense, not tried what i suggested yet would be great to know if i can style the container to make the text count up,

Thanks very much

[David]

Hi there,

i don’t really understand what should be happening here – but the @property is an experimental feature that is loosely supported only in Chrome, edge and opera – so not something i would recommend using on a production site.

Is this ‘counter’ going to be in a fixed position and update on scroll ? Or are you just wanting to add a counter to each of the listed elements?

[chris]

Was sceptical yeah, didn’t bother trying it.

Thanks David, So i have built the thing i was referring to now on the page.

Im hoping to make the numbers when scrolled into sight of the user, will start to count up to the number actually in the header.

Pretty confident i can control somewhat with CSS in > advanced however unsure on the correct script or where to look for a suitable one?

Hope you understand what i mean, thanks again

[David]

Yeah – if that @property becomes a stable thing that will definitely be the right way to go.
In the meantime its really a Javascript requirement. One method provided here on CSS Tricks:

https://css-tricks.com/animating-number-counters/#the-new-school-css-solution

Did find this pure CSS method – but its faking the number counting – and looks a bit janky if you ask em lol:

https://codepen.io/fungland/pen/GqNWMb

You will need to compile the HTML and CSS ( by selecting that option from the Cog Icon in the codepen ).

[chris]

Perfect thanks David, just one more question.

Is it possible to control two counters via different classes?
I have the counter working up to the desired number then counts back down t 0 and repeats(i thought this would be good to save faffing so it only happens when is in sight of the user.. for now anyway)

But the two counters i have used headers with counter1 and counter2 classes, are controlled by the same thing, sorry im awful at explaining.

So the same is for .counter1 but with the counter stopping at 5 and repeating to 100%.
.counter2::after {
content: counter(count);
animation: counter 2s linear infinite alternate;
}

@keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 1;
}
20% {
counter-increment: count 2;
}
30% {
counter-increment: count 3;
}
40% {
counter-increment: count 4;
}
50% {
counter-increment: count 5;
}
60% {
counter-increment: count 6;
}
70% {
counter-increment: count 7;
}
80% {
counter-increment: count 7;
}
90% {
counter-increment: count 7;
}
100% {
counter-increment: count 7;
}
}

So the question as i know im not clear myself, is can i make two of the 0-100% counters control different classes?

Thanks again massive help!

[chris]

Would be ideal to find out if I can control two @ketframes with different classes ( Still stuck with this one )

[David]

You should just need to declare a new animation for your second element ie.

animation: counter2;

Then:

@keyframes counter2

[chris]

Awesome thanks david, anyway to make them count up to the desired number and also stay that number for a few seconds longer? Cheers again!

[Elvin]

Hi there,

Awesome thanks david, anyway to make them count up to the desired number and also stay that number for a few seconds longer? Cheers again!

If you need to control it to that degree, you may have to use a JS library.

Something like this.
https://inorganik.github.io/countUp.js/

[chris]

So if i wanted to use that code:

let demo = new CountUp(‘myTargetElement’, 5);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

How and where would i go about doing so?
Its for the counter on the home page, at the bottom that count up to desired number and then stay there for a while, before counting down and back up again?

[David]

You may find it easier to just use this plugin which uses the JS library Elvin mentioned:

https://wordpress.org/plugins/wp-countup-js/

[chris]

Sorted that did the trick nice and easy, thanks guys!

[Elvin]

Your init code didn’t work because it needed a library. 🙂

The plugin David linked you to enqueues it to the site for you.

Glad you got it to work. No problem. 😀

[Author]

Posts