Animated Stats is a production-ready Framer component that animates numbers when scrolled into view. Unlike basic counter components, it ships with 4 distinct animation styles, a built-in interactive Demo Mode, and automatic responsive behavior.
Drop it on any page, add your numbers, and you're done.
Live Preview: https://animatedstatspro.framer.website/
Key Features
4 animation styles — Blur, Slide, Fade, Scale
Scroll-triggered with easeOutExpo easing
Dark / Light theme toggle
3 layout modes — 1×4, 2×2, 4×1 (auto-responsive)
Live Demo Mode — adjust everything in real time without leaving the canvas
Number size, label size, gap, radius, padding controls
Stagger delay for sequential entrance
Replay on re-enter option
Decimal number support (e.g. 4.9★)
Custom font family
Custom colors for number, suffix, label, divider
Fully responsive — auto-stacks on mobile
Usage
Add to your page
Set width to Fill
Edit stats — number, suffix, label
Done
Perfect For
Landing pages
SaaS sites
Portfolios
Agency sites
E-commerce
Keywords
Animated stats, number counter, scroll animation, animated numbers, counter component, framer stats, stats section, animated counter, scroll trigger, number animation, KPI, metrics, milestone, landing page, saas, portfolio, dark mode, light mode, framer component, code component
Ahmet Loca
