An animated number counter where each digit is an independent rolling wheel — just like a real motorcycle odometer. Set a From and To value, and watch every digit scroll through its intermediate numbers simultaneously, with higher-order digits naturally spinning slower than lower-order ones.
Odometer Digit Wheels — Each digit position is a vertical strip that rolls through all intermediate values (e.g. 2→3→4→5→6), not a simple fade or jump. Numbers are automatically zero-padded to the widest value for stable layout
Simultaneous Rolling — All digit wheels animate at the same time. Digits with more steps spin faster, digits with fewer steps spin slower, creating an authentic odometer feel
4 Trigger Modes — On Appear (fires on page load), On Scroll (counter progress tied directly to scroll position), Layer in View (fires when this component enters the viewport), Section in View (fires when a named Framer Scroll Section enters the viewport)
Scroll-Linked Animation — In On Scroll mode, the counter progress maps 1:1 to how far the element has traveled through the viewport — scroll down to count up, scroll back to count down
Section in View — Reference any Framer Scroll Section by its # name. The counter waits until that entire section scrolls into view before animating
4 Easing Curves — Linear, Smooth (cubic ease-out), Spring (overshoot + settle), Bounce (dramatic overshoot). Duration and Easing auto-hide when On Scroll is selected since scroll drives the timing
Count Up or Down — Set any From/To range. The component auto-detects direction and rolls each digit forward or backward accordingly, with correct 9→0 and 0→9 wrap-around
Depth Mask — A gradient mask fades the top and bottom edges of each rolling wheel, giving the illusion of looking through an odometer window
Prefix & Suffix — Add currency symbols ($, €, £), percentage signs (%), units (k, M), or any text before/after the number
Number Formatting — Toggle thousand separators (1,000 vs 1000), set 0–4 decimal places. Separators and decimal points are rendered as static characters between the rolling wheels
Full Font Control — Uses Framer's native Font picker with extended controls: family, weight, size, line height, alignment, letter spacing, OpenType features, and variable axes
Semantic HTML — Choose the container tag (H1–H6, P, DIV, SPAN) for proper document structure and SEO
Statistics sections, pricing counters, dashboard KPIs, portfolio metrics, landing page social proof numbers, fundraising totals, countdown/countup hero numbers, and any place where an animated number creates impact.
Drop the component onto your Framer canvas and resize as needed
Set the From and To values in the property panel — the component counts between these two numbers
Choose a Trigger mode: On Appear for above-the-fold numbers, Layer in View for scroll-triggered sections, Section in View to sync with a named Scroll Section, or On Scroll to tie the counter directly to scroll position
Adjust Duration and Easing to control the animation feel (hidden in On Scroll mode)
Add a Prefix ($ € £) or Suffix (% + k) if needed
Toggle Thousands Sep on for large numbers and set Decimals for fractional values
Open the Font control to pick any font with full weight, size, line-height, and letter-spacing options
Set the Color and choose an HTML Tag for semantic markup
Preview to see the odometer wheels roll
Created by AliThemes.com · Powered by Framer Motion
Ali Themes
