Elevate your landing pages, portfolio, and product showcases with the Counter Animator component. This fully-customizable Framer component triggers smooth, engaging number animations when scrolling into view—perfect for displaying statistics, metrics, achievements, or any compelling numbers.
Key Features
✨ Scroll-Triggered Animation
Automatically animates when the component comes into view
Smooth easing for professional presentation
Single trigger per scroll (doesn't re-animate on scroll back)
🎨 Fully Customizable
Adjust start number, end number, and duration
Control animation speed and easing curves
Customize colors, fonts, and sizing
Add currency symbols, decimals, or suffixes (%, K, M, etc.)
⚡ Performance Optimized
Lightweight and fast-loading
Smooth 60fps animations
Optimized for mobile and desktop
No external dependencies
🔧 Easy to Use
Drag and drop into your Framer project
Simple props-based configuration
Works seamlessly with Framer design system
Copy-paste ready code included
Perfect For
Landing pages showcasing company stats
Portfolio sites displaying project metrics
SaaS dashboards with KPI displays
E-commerce sites showing conversion rates
Product pages highlighting achievements
Case studies and testimonials
Any design needing engaging data visualization
What's Included
Fully functional Framer component
Multiple animation preset options
Customizable number formatting
Responsive design (mobile-friendly)
Documentation with usage examples
Ready-to-customize colors and typography
Example Use Cases
For Agencies: "Built 500+ projects" | "95% Client Satisfaction" | "$2M+ Revenue Generated"
For SaaS: "10K+ Active Users" | "99.9% Uptime" | "2M+ API Calls"
For E-commerce: "50K+ Happy Customers" | "$5M+ in Sales" | "4.9★ Rating"
For Portfolios: "12 Awards Won" | "3+ Years Experience" | "100+ Projects Completed"
Customization Options:
Number range (start value → end value)
Animation duration (0.5s - 5s)
Easing functions (ease-in, ease-out, ease-in-out, linear)
Decimal places (0-3)
Suffix/Prefix support (€, $, %, K, M, etc.)
Font family, weight, and size
Color (including gradients)
Trigger offset (when animation starts relative to scroll)
Arkdezin Studio
