Fancy Numbers

Effortlessly turn plain numbers into eye-catching animations that boost credibility, draw focus, and keep visitors engaged for longer.

Easy to Use

Add the Fancy Number Bric to your site, apply a pre-made Fancy Number class to any numeric text and watch it animate smoothly up or down.

Supported Classes

Apply any of the classes or data attributes below to numerical text and Fancy Numbers will do the rest.

fn-up = Animates a number upward from 0 to its target value.
ft-down = Animates a number downward from a higher value.
fn-speed-s = Slow animation speed (≈ 6 s).
fn-speed-f = Fast animation speed (≈ 800 ms).

Supported Data Attributes

data-fn-duration = Set a custom animation length in milliseconds.
data-fn-from = Define a custom start value.
data-fn-to = Define a custom end value.
data-fn-replay = Replays the animation every time the element is onscreen.

Supported Number Formats

Fancy Numbers also automatically detects and preserves, currency symbols, unit symbols, commas, decimals and unit abbreviations.

Documentation

You can read the Fancy Number Bric documentation here.