Animated Counter

ANIMATED COUNTER

Turn ordinary numbers into animated stats that count, roll, or race to their final value.

Simply type your final number into a Showit text box, choose an animation style, and let the code do the counting.


WHAT YOU'LL NEED

A Showit text box

One Class Selector

Page Loaded Javascript


HOW TO INSTALL


01 — ADD YOUR NUMBER

Add a normal text box in Showit and type the number you want the counter to finish on.

Examples:

10+

500+

100%

$1M+

$25K

1,250

98.5%

You do not need to enter the number anywhere in the code. The code reads the final value directly from your Showit text box.


02 — CHOOSE YOUR ANIMATION

Select your text box and go to:

Advanced → Class Selectors

Add one of the following classes:

count-up

Counts smoothly from 0 to your final number.

count-roll

Rolls the digits vertically like an odometer.

count-rapid

Rapidly changes the number before settling on the final value.

Do not include the period before the class name.


03 — ADD THE CODE

Go to:

Page → Advanced Settings → Page Loaded Javascript

Paste in the entire Animated Counter code.

The code only needs to be added once per page, even if you use multiple animated counters.


04 — ADD MORE COUNTERS

You can use as many animated counters as you want on the same page.

Simply create another Showit text box, type the final number, and give it one of the three Class Selectors.

You can mix and match Count Up, Roll, and Rapid counters on the same page.


05 — ADJUST THE SPEED

At the top of the code, you'll find:

countUpDuration: 3500,

rollDuration: 3500,

rapidDuration: 3500,

These numbers control how long each animation lasts in milliseconds.

Higher number = slower animation

Lower number = faster animation

For example:

2000 = 2 seconds

3500 = 3.5 seconds

5000 = 5 seconds


06 — CUSTOMIZE THE ROLL

Find:

rollTurns: 3,

This controls how many times the digits cycle before landing on the final number.

Increase the number for more rolling.

Decrease it for fewer rotations.


07 — CUSTOMIZE THE RAPID COUNTER

Find:

rapidSpeed: 90,

This controls how quickly the numbers change during the Rapid animation.

Lower number = faster changes

Higher number = slower changes


08 — CHOOSE WHETHER IT REPLAYS

Find:

playOnce: true

Use:

true

to play the animation once.

Use:

false

to reset the counter after it leaves the screen and replay it when it comes back into view.


09 — PREVIEW + TEST

Open Preview and scroll to your counters.

Check that each number reaches the correct final value and that the animation speed works with your design.

The counter keeps prefixes and suffixes such as:

$

%

+

K

M

It can also preserve commas and decimal places.


DESIGN TIP

Animated Counter works especially well for statistics, milestones, years of experience, client numbers, percentages, revenue figures, project totals, and other numbers you want visitors to notice.

Mix the three animation styles across a row of statistics for a little variety, or use the same style throughout for a more uniform look.


QUICK INFO

DIFFICULTY — Easy

REQUIRES — Showit Text + Page Loaded Javascript

CLASS SELECTORS — count-up / count-roll / count-rapid

ANIMATION STYLES — Count Up / Roll / Rapid

MULTIPLE COUNTERS PER PAGE — Yes

PREFIXES + SUFFIXES — Yes

COMMAS + DECIMALS — Yes

ANIMATION SPEED — Customizable

REPLAY OPTION — Yes

MOBILE FRIENDLY — Yes

CODING KNOWLEDGE — Not required