Overview
The Counter Group Block displays multiple animated counters together in a coordinated layout. Perfect for showcasing statistics, achievements, milestones, or key metrics that count up when scrolled into view.
Key Features
- Multiple Counters: Display 2-6 counters in a group
- Scroll Animation: Counters animate when visible
- Customizable Layout: Grid or row layout with spacing control
- Prefix/Suffix Support: Add symbols ($, +, %, etc.)
- Duration Control: Set animation speed per counter
- Icon Support: Add icons above counters
- Responsive: Adapts column count by screen size
How to Use
- Add the Counter Group block
- Add individual Counter blocks inside
- Set target numbers for each counter
- Add labels describing each metric
- Configure layout columns and spacing
- Customize animation settings
- Preview scroll animation
Individual Counter Settings
- Target Number: Final count value
- Duration: Animation length in milliseconds
- Prefix: Character before number ($, #)
- Suffix: Character after number (+, %, K, M)
- Decimals: Number of decimal places
- Label: Description text below counter
- Icon: Optional icon above counter
Common Use Cases
- Company Statistics: Years in business, employees, customers
- Achievement Metrics: Awards, projects completed, happy clients
- Social Proof: Users, downloads, reviews
- Performance Metrics: Speed improvements, uptime percentage
- Event Stats: Attendees, speakers, sessions
- E-commerce: Products, categories, daily orders
Best Practices
- Use 3-4 counters for optimal visual balance
- Keep labels concise (1-3 words)
- Choose appropriate animation duration (1500-3000ms)
- Add stagger delay for sequential effect
- Use prefixes/suffixes to clarify meaning
- Ensure counters represent impressive, relevant metrics
- Test animation trigger offset for best timing
Number Formatting Tips
- Large numbers: Use K, M, B suffixes (5K, 2.5M)
- Percentages: Add % suffix (98%)
- Money: Use $ prefix (9.99)
- Ratings: Use decimals (4.8)
- Time periods: Add + suffix (10+ years)
Accessibility
- Ensure color contrast for numbers and labels (4.5:1 minimum)
- Provide static final values for screen readers
- Respect prefers-reduced-motion setting
- Add ARIA labels for context
Troubleshooting
- Counters not animating: Check scroll trigger offset, verify JavaScript enabled
- Animation too fast/slow: Adjust duration setting
- Layout breaks on mobile: Adjust responsive column settings
- Numbers incorrect: Verify target number, check prefix/suffix