The Fancy Numbers Bric adds a touch of motion and polish to your site, animating numbers that count up or down to engage visitors instantly.
How to use
Once you’ve installed the Fancy Numbers Bric, simply insert the Bric into your Blocs project using the Bric Bar.
As long as the Fancy Numbers Bric is present within a page, you can use and combine any of the pre-defined classes and custom data attributes to animate the numbers within a text Bric.
For best results we recommend wrapping the numerical value in a span and applying the Fancy Number classes directly to the span, rather than the parent text Bric. This helps to maintain text style formatting.
When you preview or publish your website, Fancy Numbers will take care of the rest.
Supported Classes
- fn-up Animates a number upward from 0 to its target value.
- fn-down Animates a number downward from a higher value (default 10× the target) to its target value.
- fn-speed-s Slow animation speed (≈ 6 s). Great for larger values or dramatic emphasis.
- fn-speed-f Fast animation speed (≈ 800 ms). Perfect for small numbers or quick stat reveals.
Take care to use either .fn-up or .fn-down on each element, don’t apply both direction classes to a single element.
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 scrolls into view. By default, numbers animate only once. Supported values true / false.
Supported Number Formats
Fancy Numbers automatically detects and preserves:
- Currency symbols $, €, £, ¥, ₩, ₹, ₽, ₺, ₦, ₫
- Unit symbols %, px, em, kg, km, m, cm, mi, s, ms, °C, °F, h, hrs
- Sign characters +, –
- Abbreviations K, M, B, T
- Commas & decimals 1,000, 10.5, 2,500.75
Download
Fancy Numbers is available to download free at the Blocs Store.