ANIMATED STATS PRO
v1.0 Guide
GETTING STARTED
STAT TYPES
STYLING
ANIMATION
LAYOUT
ADVANCED
TIPS & RECIPES
USER GUIDE
Animated Stats Pro
An animated stat display for Framer with 6 stat types, 4 number animation styles, entry effects, a responsive multi-column grid, dividers, and Light/Dark theme exports — all configured from the Properties panel without touching code.
6 Stat Types
4 Anim Styles
Up to 6 Stats in One Component
Responsive Grid
Light & Dark Themes
On Load · On Scroll · Loop
💡
How to read this guide
Every control name shown like Control Name matches exactly what you see in Framer’s right panel.
STEP 0 — BEFORE ANYTHING ELSE
Framer Setup — Make it Responsive
Animated Stats Pro is designed to fill its container. To make it responsive you must wrap it in a Stack and set the Stack’s width to Fill. Skip this step and the component will not resize on different screen sizes.
⚠️
Required for responsive behaviour
Do this before configuring anything else. A component floating free on the canvas at a fixed width will not reflow columns on mobile.
1
Drop the component onto the canvas
From the Assets panel, drag Theme : Light or Theme : Dark onto your frame.
2
Wrap it in a Stack
Select the component, then right-click → Wrap in Stack (or Insert → Stack). A Stack container appears around it.
3
Set the Stack’s Width to “Fill”
Click the Stack in the Layers panel. In the right panel, find Width and switch it from Fixed to Fill. The Stack — and the component inside it — will stretch to match the parent’s width.
4
Set Height to “Fit Content”
Set the Stack’s Height to Fit Content so it grows vertically when stats wrap to a new row on narrow screens.
5
Now configure the component
Click the Animated Stats Pro component inside the Stack. All Properties panel controls below are now ready to use.
Drop component
→
Wrap in Stack
→
Stack Width = Fill
→
Stack Height = Fit Content
→
Configure freely ✓
ℹ️
Which export to pick?
Use Theme : Light for light-background pages and Theme : Dark for dark-background pages. The variant controls default colors and divider auto-tint automatically. You can always override individual colors afterward.
STAT TYPES
All 6 Stat Types
Each stat slot has a Stat Type selector. Pick the type first — it shows and hides the relevant controls for that slot automatically.
CURRENCY
$4.2M+
Revenue, ARR, GMV. Supports compact (K/M/B), thousand separators, decimals.
PERCENTAGE
98%
Satisfaction, uptime, conversion. Auto-appends the % suffix.
RANK
#1
League position, search ranking. Auto-prepends # by default.
MULTIPLIER
10x
Growth factor, speed-up. Auto-appends the x suffix.
DURATION
12 yrs 4 mos
Years, plus optional months and days. Configurable suffix strings.
RATING
4.9/5 ★
Score with optional star display. Supports 5-star and 10-point scales.
💡
Each slot is independent
In a multi-stat layout each of the 6 slots can be a different Stat Type. Slot 1 can be Currency, Slot 2 Percentage, Slot 3 Rating — all in one component drop.
STAT TYPE → CURRENCY
Currency
Best for revenue, ARR, funding amounts, or any large money figure. Shows a number with a currency symbol prefix and optional suffix badge.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
End Value
0 – 10,000,000
The number the counter animates to. Set this to your actual figure (e.g. 4200000 for $4.2M).
Format
International · European · Space · Indian
Controls the thousands-separator style. International uses commas ($10,000). European uses periods with the symbol appended. Space uses spaces. Indian uses the lakh/crore grouping.
Display
Full / Compact
Compact abbreviates large numbers to K, M, B (4200000 → 4.2M). Full shows the exact number with separators.
Decimals
0 · 1 · 2 · 3 places
Number of decimal places shown. Available in Full mode and in Compact mode alongside the abbreviated value.
Leading Zeros
On / Off
Pads the number so its digit width matches the end value from the first frame, preventing layout shift during the count.
Prefix / Suffix
Text (default $ / +)
Symbol shown before and text shown after the number. Leave prefix blank for auto — it follows the chosen Format.
💡
$4.2M recipe
Set End Value to 4200000, Display to Compact, Decimals on with 1 place. The counter animates cleanly from 0 to 4.2M.
STAT TYPE → PERCENTAGE
Percentage
Satisfaction scores, uptime, NPS response rate, conversion — any figure measured in percent.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
End Value
0 – 10,000
The percentage to count up to. Values above 100 are valid (e.g. 340% growth).
Decimals
0 · 1 · 2
Decimal places on the percentage. 0 shows whole numbers, 1 shows 99.9%, 2 shows 99.99%
Suffix
Text (default “%”)
Auto-appended after the number. Change to any symbol, or clear it to remove entirely.
Leading Zeros
On / Off
Pads to match the digit count of the end value, preventing the number from jumping width mid-animation.
STAT TYPE → RANK
Rank
League table position, search ranking, app store ranking. Animates from a starting position down to the target rank.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
End Value
0 – 9,999
The rank number to land on (e.g. 1 for #1, 42 for #42).
Prefix
Text (default “#”)
Symbol before the rank number. Change to “No.” or clear entirely.
Leading Zeros
On / Off
Pads the rank to a consistent digit width during the count animation.
STAT TYPE → MULTIPLIER
Multiplier
Growth factor, speed improvement, or any “X times better” claim.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
End Value
0 – 10,000
The multiplier to count to (e.g. 10 for 10×).
Suffix
Text (default “x”)
Auto-appended. Change to × for typographic precision, or any custom string.
Leading Zeros
On / Off
Pads the number during animation to prevent width shifts.
STAT TYPE → DURATION
Duration
Display time-based values like years of experience or company age, with an optional months and days breakdown. Duration has the most options of any stat type.
ℹ️
Year segment (primary)
The primary Year counter animates. Add optional Month and Day sub-values that appear as static labels beside it — e.g. 12 yrs 4 mos 3d.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Year
0 – 100,000
The main animated number — years, or any integer you want as the primary counter.
Year Suffix
Text (default “yrs”)
Label after the year number. Common: yrs, yr, years, y. The component does not auto-pluralise — type exactly what you want shown.
Month
0 – 11
Optional month sub-value shown beside the year. Set to 0 to hide the month segment entirely.
Month Suffix
Text (default “mos”)
Label after the month number. Only visible when Month is greater than 0.
Day
0 – 31
Optional day sub-value. Set to 0 to hide. Only shows when Month or Day is greater than 0.
Gap
–50 – 100
Horizontal spacing between the year segment and the month/day group, as a percent of font size. Negative values pull them closer.
Stagger
0 – 0.8
Delay between each segment’s animation start, as a fraction of the total duration. 0 means all segments animate together.
Order
Year → Month → Day · reverse
Controls which segment starts animating first when Stagger is greater than 0.
💡
Recipe — “12 yrs 4 mos”
Year = 12, Year Suffix = yrs, Month = 4, Month Suffix = mos, Day = 0. The result is a clean animated year with a static month label.
STAT TYPE → RATING
Rating
Show a score like 4.9/5 with an optional star display. Supports 5-point and 10-point scales, fractional ratings, and three star display modes.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Rating
0 – Max Rating
The score to display and animate to. Supports decimals (e.g. 4.9).
Max Rating
5 · 10
Sets the rating scale. The denominator shown (e.g. /5 or /10) updates automatically.
Decimals
0 · 1 · 2
Decimal places on the rating number. 0 shows whole numbers, 1 shows 4.9, 2 shows 4.90.
Stars → Mode
Full · Compact · Off
Full: five stars with partial fill based on the live score. Compact: a single star beside the number. Off: no stars, just the score.
Stars → Direction
Horizontal · Vertical
Whether the stars sit beside the score (Horizontal) or stacked above/below it (Vertical).
Stars → Order
Before · After
Whether the stars appear before or after the score number.
Stars → Fill / Empty
Color pickers
Color of the filled star portion and the unfilled portion. Defaults land on an amber fill with a muted grey empty state.
💡
Compact star recipe (most common)
Rating = 4.9, Max Rating = 5, Decimals = 1, Stars Mode = Compact, Direction = Horizontal, Order = After. Result: an animated 4.9/5 ★
STYLING
Number Style
Found under Number Style in the Properties panel. Controls the typography and shadow of the animated number itself — shared across every slot in the component.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Style
Auto · Custom
Auto: bold size inherited from the page’s font. Custom: reveals the full typography controls below.
Font / Size / Weight
Font picker · px · 100–900
Choose any font loaded in your Framer project, its size in pixels, and its weight. Only visible in Custom mode.
Color
Color picker
Number color. In Auto mode, follows the theme variant’s default text color. Custom mode always uses the color you pick.
Shadow
On / Off + Color / X / Y / Blur
Enables a text shadow on the number with adjustable color, offset, and blur radius.
STYLING
Prefix & Suffix
Currency, Percentage, Rank, and Multiplier each expose Prefix and/or Suffix groups. These controls fine-tune the size, position, opacity, color, and weight of the symbol relative to the number.
ℹ️
Which group appears?
Currency → Prefix ($) + Suffix (+). Rank → Prefix (#). Percentage → Suffix (%). Multiplier → Suffix (x). Duration uses inline suffix text fields. Rating has no affix groups.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Value
Text string
The character(s) to display. Any Unicode character works — $, €, £, #, ×, and so on.
Size %
10 – 200%
Size of the affix relative to the number’s font size. 100% matches, 60% reads as a small superscript, 140% adds emphasis.
Opacity
0 – 100%
Transparency of the affix. Useful to visually de-emphasise the symbol, e.g. 50% for a subtle $.
Position
0 – 100
Vertical position of the affix. 50 sits on the baseline; below shifts up, above shifts down — useful for superscript-style symbols.
Distance / Color / Weight
0–100 · picker · 0/100–900
Distance adds horizontal gap from the number. Color and Weight override the affix independently — set to default to inherit from the number.
💡
Superscript $ recipe
Prefix Size % = 55, Position = 20, Opacity = 80. The dollar sign floats small and high, like a typeset superscript.
STYLING
Label
The label is the descriptive text beside the number — “Revenue”, “Customer NPS”, “Years of Experience”. Found under Label in the Properties panel. Each slot sets its own label text directly.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Value (per slot)
Text string
The label text for that specific stat, e.g. “Total Revenue” or “Years of Experience”. Leave blank to show no label on that slot.
Style
Auto · Custom
Auto: label size follows the number proportionally. Custom: reveals full typography and layout controls.
Direction / Position
Vertical · Horizontal
Whether the label stacks above/below the number or sits beside it, and on which side. Custom mode only.
Gap
0 – 80 px
Space between the number and the label. Custom mode only.
Color / Opacity / Shadow
Picker · 0–100% · shadow group
Color is visible in both Auto and Custom. Opacity and Shadow (same controls as the number shadow) are Custom mode only.
💡
Common label pattern
Leave Style on Auto and adjust only the Color. This gives a proportional label that scales automatically if the number size changes later.
ANIMATION
Number Animation
Found under Number Animation in the Properties panel. Controls how each digit changes visually as the counter counts from Start to End.
Count Up
Simple numeric roll — the number jumps between integer values, decelerating toward the end. The default. Works with any easing. Best for small numbers or clean minimal designs.
Odometer
Each digit is a vertical strip that scrolls upward — like a mechanical odometer or a slot reel slowing to a stop. Works beautifully for currency and high digit counts. Most realistic feel.
Slot Machine
Digits spin rapidly then snap into place with a spring bounce — like a slot machine landing on the result. More playful than Odometer. Great for gamified or product-focused stats.
Glitch
RGB chromatic aberration split plus a horizontal scan-line sweep during animation, then resolves to a clean final value. Dramatic effect for hero sections or tech/developer audiences.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Animation
Count Up · Odometer · Slot Machine · Glitch
Chooses the visual style of digit change. Applies to all slots in the component.
Duration
0.1 – 20 s
How many seconds the count animation takes from start to end value. 2s is the default — a good balance of drama and speed.
Delay
0 – 10 s
Seconds to wait after the trigger fires before the number starts counting. Useful for staggering multiple components on the same page.
Easing
Linear · Smooth · Sprint
Linear: constant speed throughout. Smooth: exponential ease-out, gliding gently to the end. Sprint: explosive start, hard deceleration — best for short dramatic counts.
💡
Best combo for large numbers
Animation = Odometer, Duration = 2.5s, Easing = Smooth. The odometer rolls and eases to a satisfying mechanical stop.
ℹ️
Log-space interpolation for large ranges
When counting a large range (e.g. 0 → 10,000), the counter uses logarithmic interpolation so the digit change feels perceptually even throughout — early digits don’t rush past while late digits crawl.
ANIMATION
Entry Animation
Found under Entry Animation in the Properties panel. Controls how the entire stat block (number + label) enters the viewport — independent from the number counting animation, both can run simultaneously.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Enter From
Static · Move Up · Move Down
Static: no movement, stat appears in place. Move Up: enters from 24px below. Move Down: enters from 24px above. Combine with an Effect for a richer entrance.
Effect
None · Fade · Blur · Blur + Fade
None: always opaque. Fade: opacity 0 to 1. Blur: materialises through a dissolving blur, staying opaque. Blur + Fade: fades and clears blur together for the most cinematic feel.
Easing
Linear · Ease In · Ease Out · Bounce · Spring
Easing curve for entry motion and effect. Ease Out is the default. Spring overshoots slightly before settling. Bounce bounces three times.
Duration
0.1 – 10 s
How long the entry animation takes. Default 0.8s. Shorter is snappier, longer is more cinematic.
Delay
0 – 10 s
Seconds to wait after the trigger before entry begins. Use to stagger the stat’s entrance after other page elements.
Stagger
0 – 0.5 s
Delay added between each stat slot’s entry. 0.12s means Slot 1 enters, then 0.12s later Slot 2, then Slot 3, and so on — creating a cascade effect.
Mode
Together · One by One
Only visible when Stagger is greater than 0. Together: all slots start within the stagger window. One by One: each slot waits for the previous to finish first.
💡
Cinematic entrance recipe
Enter From = Move Up, Effect = Blur + Fade, Easing = Ease Out, Duration = 0.9s, Stagger = 0.12s. Each stat materialises upward, blurred to clear, with a waterfall timing across the grid.
ANIMATION
Trigger & Loop
Controls when both the number and entry animations fire.
CONTROL
OPTIONS
WHAT IT DOES
Trigger
On Load · On Scroll · Loop
On Load: fires immediately on page load (default). On Scroll: fires once the component scrolls 25% into the viewport. Loop: repeats indefinitely on a timer.
Loop Delay
0.1 – 30 s
Time to pause between each loop cycle. Only visible when Trigger is set to Loop.
Motion
System Settings · Always · Never
System Settings respects the visitor’s reduced-motion preference. Always forces animation on. Never shows the final value immediately with no animation.
ℹ️
On Scroll needs a responsive width
The scroll-into-view calculation stays reliable if the component has a flexible width. Revisit the Framer Setup section above if you haven’t wrapped it in a Fill-width Stack yet.
LAYOUT
Grid & Columns
Found under Layout in the Properties panel. Configures the multi-column grid that holds all enabled stat slots. The grid is fully responsive — columns automatically reduce on narrow containers.
⚠️
Reminder: wrap in a Fill-width Stack first
The grid can only be responsive if the component has a flexible width. See the Framer Setup section above if you haven’t done this yet.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Columns
Auto · 1 · 2 · 3 · 4 · 6
Auto: as many columns as fit, using Min Width as the cell floor. 1–6: sets a maximum column count, reducing responsively below that if the container is too narrow.
Min Width
80 – 600 px
Minimum cell width. Only visible when Columns = Auto. The grid adds as many columns as can fit without any cell going below this width. Default 200px.
Col Gap / Row Gap
0 – 200 px each
Col Gap is horizontal spacing between columns (default 40px) — the divider, if enabled, lives in this space. Row Gap is vertical spacing when stats wrap (default 50px).
Position
Left · Center · Right
Aligns the entire grid within the component frame. Center is the default. Use Left or Right to dock the grid when it’s narrower than the full frame.
Align
Left · Center · Right
Aligns the content (number + label) inside each cell. Default Left. Set to Center for a centered layout within each column.
Cell Padding
0 – 400 px
Extra horizontal padding inside each cell, on both sides. Adds breathing room between content and the divider line.
💡
Common 3-column setup
Columns = 3, Col Gap = 48, Row Gap = 48, Position = Center, Align = Left, Cell Padding = 0. On mobile the 3 columns collapse to 1 automatically.
ℹ️
Enabling / disabling individual slots
Inside each stat slot (Stat 1 through Stat 6) there is a Show toggle. Turn off any slot you don’t need — disabled slots are removed from the grid entirely, and the column count adjusts.
LAYOUT
Divider
Found under Divider in the Properties panel. Renders a decorative line between stat columns and/or rows.
CONTROL
OPTIONS / RANGE
WHAT IT DOES
Show
On / Off
Toggles the divider on or off globally. Default On.
Direction
Vertical · Horizontal · Both
Vertical: lines between columns. Horizontal: lines between rows (visible when stats wrap). Both: lines between columns and rows simultaneously.
Color
Color picker (auto by default)
Default auto reads the current theme and sets a subtle dark or light line automatically. Pick any custom color to override.
Thickness
1 – 8 px
Line thickness in pixels. 1px is the default hairline. Increase for a bolder divider.
Length %
10 – 100%
How much of the cell height (Vertical) or width (Horizontal) the line spans. 60% is a short centered tick, 100% is a full edge-to-edge line.
💡
Subtle tick recipe
Direction = Vertical, Thickness = 1, Length % = 50. A small centered tick that suggests separation without dominating — common in minimal SaaS stat bars.
⚠️
Divider and Col Gap work together
The divider line lives inside the Col Gap space. If Col Gap is 0, the divider has no room to appear. Set Col Gap to at least 24px when using a divider.
ADVANCED
Theme — Light & Dark
Animated Stats Pro exports as two named components: Theme : Light and Theme : Dark. Pick the one that matches your page background at drop time. The variant is locked per export — you don’t need to set it in the panel.
EXPORT
DEFAULT NUMBER COLOR
DIVIDER AUTO-COLOR
Theme : Light
#111111
rgba(0,0,0,0.40) — subtle dark line
Theme : Dark
#ffffff
rgba(255,255,255,0.40) — subtle light line
ℹ️
Overriding theme colors
All colors (number, label, divider, prefix, suffix, stars) can be overridden individually after choosing a theme variant. The theme only sets smart defaults — it doesn’t lock anything.
💡
Using both on one page
If your page has a dark hero section and a light features section, drop Theme : Dark on the hero and Theme : Light on the features section. Each is an independent component with identical controls.
ADVANCED
Presets
The component ships with built-in presets accessible from the Preset control inside the Stats group. A preset enables a specific combination of slots and sets a sensible column count — a useful starting point in one click.
PRESET
SLOTS ENABLED
DEFAULT COLUMNS
Custom
You control each slot’s Show toggle
Auto
Minimal Single
Slot 1 only
1
Classic 3
Slots 1, 2, 3
3
Social Proof 4
Slots 1, 2, 3, 4
4
Full Grid 6
All 6 slots
3
💡
Workflow
Pick a preset to get the right number of stats, then configure each slot’s Stat Type, values, and labels. Style globally afterward via Number Style, Label, and Entry Animation.
ADVANCED
HTML Tag
The Tag control, at the bottom of the Properties panel, sets the HTML element wrapping each stat number. This is a semantic SEO setting — it does not change the visual appearance.
VALUE
WHEN TO USE IT
div
Default. Safe for all contexts — no semantic heading hierarchy implied.
span
Use when the stat is inline with surrounding text.
h1
Only if this is the primary heading on the page (rare for a stat). One h1 per page.
h2
If the stat is a section headline — e.g. a big number that introduces a section.
h3
Sub-section stat. The most common semantic choice for stats within a features section.
p
Treats the stat as a paragraph — fine for decorative numbers with no heading role.
TIPS & RECIPES
Common Recipes & Tips
Quick configurations for the most common use cases.
SaaS Social Proof Bar
Preset → Social Proof 4
Columns → 4, Col Gap → 48
Divider → On, Vertical, Length 50%
Entry Anim → Move Up + Fade, Ease Out, Stagger 0.1s
Trigger → On Scroll
Slot 1: Currency $4.2M ARR · Slot 2: Percentage 98% uptime
Slot 3: Rank #1 G2 rating · Slot 4: Rating 4.9/5 ★
Single Hero Stat
Preset → Minimal Single · Stat Type → Currency
End Value → 10000000 ($10M), Display → Compact
Decimals → On, 1 place (shows 10.0M)
Animation → Odometer, Easing → Smooth, Duration → 3s
Entry Effect → Blur + Fade, Number Size → 96px
Label → “Total Revenue”
Experience Timeline
“12 yrs 4 mos experience” — Stat Type → Duration
Year → 12, Year Suffix → yrs
Month → 4, Month Suffix → mos
Day → 0 (hidden), Gap → 4, Stagger → 0
Label → “Experience”
Compact Review Badge
4.9/5 ★ inline beside testimonials — Stat Type → Rating
Rating → 4.9, Max Rating → 5, Decimals → 1
Stars Mode → Compact, Direction → Horizontal, Order → After
Animation → Count Up, Duration → 1.5s
General Tips
💡
Prevent layout shift during animation
Enable Leading Zeros for any stat that starts with a low digit count and grows (e.g. 0 → 100). The number holds its full width from frame one, so nothing around it shifts.
💡
Motion accessibility
Set Motion to System Settings for production sites. Visitors with “Reduce Motion” enabled will see the final value immediately with no animation — better for accessibility and performance.
⚠️
Animation does not play in canvas edit mode
All animations fire in Preview or the published site. The canvas shows the static final value. This is expected — Framer disables animations in the editor to keep canvas performance fast.
⚠️
Changing Stat Type resets only type-specific controls
Switching from Currency to Rating on a slot does not reset your animation, label, or number style settings. Only the stat-specific controls (value, format, prefix/suffix) change.
ℹ️
Multiple components on one page
Each component instance has its own animation timeline. If you drop three separate components across three sections, each fires its own trigger independently. Use Delay to fine-tune sequencing within a section.