Counter

Animated number counters that increment on scroll

Pro Feature

The Counter element requires a Pro or Agency license. Learn about licensing.

Overview

The Counter element displays animated numbers that count up from zero when scrolled into view. Counters are perfect for showcasing statistics, achievements, milestones, or key metrics on landing pages and about sections.

Each Counter contains multiple counter items that animate independently. Numbers animate from 0 to their target value with configurable duration, and you can add prefixes (like "$") or suffixes (like "+" or "%") to format the display.

Counters support horizontal or vertical layouts, making them versatile for different page designs. The animation triggers automatically when the element enters the viewport.

Settings

Configure the Counter element using these Inspector options:

Setting Description Default
Items Array of counter items, each with its own value, label, and animation settings. 3 sample items
Layout Arrangement of counter items. Options: horizontal (side-by-side), vertical (stacked). horizontal
Number Class CSS classes applied to the animated number display. text-4xl font-bold
Label Class CSS classes applied to the label text below each number. text-gray-600 mt-2
Item Class CSS classes applied to each counter item wrapper. (empty)

Default Classes

Counters are created with these default Tailwind classes:

text-center

Item Structure

Each counter item in the items array contains these properties:

Property Description Example
endValue The target number to count up to. 100, 50, 99
prefix Text displayed before the number. "$", "#"
suffix Text displayed after the number. "+", "%", "k"
label Description text below the number. "Projects", "Clients"
decimals Number of decimal places to display (0 for integers). 0, 1, 2
duration Animation duration in seconds. 2

Examples

Statistics Row

Display key metrics in a horizontal row, perfect for "About Us" or landing page sections.

{
  "items": [
    { "endValue": 100, "suffix": "+", "label": "Projects Completed" },
    { "endValue": 50, "label": "Happy Clients" },
    { "endValue": 99, "suffix": "%", "label": "Satisfaction Rate" }
  ],
  "layout": "horizontal",
  "numberClass": "text-4xl font-bold text-primary",
  "labelClass": "text-gray-600 mt-2"
}

Result: Three counters side-by-side showing "100+", "50", and "99%"

Counter with Prefix and Suffix

Use prefixes for currency symbols and suffixes for units.

{
  "items": [
    { "endValue": 2.5, "prefix": "$", "suffix": "M", "label": "Revenue", "decimals": 1 },
    { "endValue": 150, "suffix": "k", "label": "Downloads" },
    { "endValue": 4.9, "label": "App Rating", "decimals": 1 }
  ]
}

Result: "$2.5M", "150k", "4.9"

Vertical Counter Layout

Stack counters vertically for sidebar or narrow column placement.

{
  "items": [
    { "endValue": 25, "label": "Years Experience" },
    { "endValue": 500, "suffix": "+", "label": "Projects" },
    { "endValue": 98, "suffix": "%", "label": "On-Time Delivery" }
  ],
  "layout": "vertical",
  "itemClass": "mb-8"
}
Animation Tip

Counter animations trigger when the element scrolls into view. For best effect, place counters in a section that requires scrolling to reach. The animation plays once and does not repeat.

Next Steps