---
title: "CounterUp — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sadiq Abdulqudus · Interactive. Overview Make your metrics feel alive."
canonical: "https://framer.elliotli.dev/component/counterup"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/CounterUp

# CounterUp

[View on Framer](https://framer.com/marketplace/components/counterup/?via=elliot-li)

![CounterUp preview image 1](https://framer.elliotli.dev/og/component/counterup/2d01c6a7f762de6b/1600x1200.jpg)

## Summary

Overview Make your metrics feel alive.

## Description

## Overview

Make your metrics feel alive. This CountUp combines rolling digits with precise counting for a premium, trustworthy feel. Design prefix, value and suffix independently with full typography control or sync them instantly. It handles decimals and commas out of the box and gives you flexible autoplay in view so you can trigger once or every time for dynamic sections and sliders.

## Why it is different

• True rolling digits that match the count

• Full typographic control for each segment

• Reliable number formatting including decimals and commas

• Thoughtful play modes that fit real page behavior

• Built to be fast and smooth at any size

## How to use

1.  Install the component from the Marketplace
    
2.  Drop it into your canvas
    
3.  Set start and end values
    
4.  Choose play mode and duration
    
5.  Style prefix, value and suffix or enable sync
    
6.  Preview and publish
    

FAQ

**Does it support decimals**Yes. Set decimal Places to the exact number you need.

**Can I show commas**Yes. Toggle use Commas.

**Can it animate only once**Yes. Use play Mode set to auto or Once. For repeated animation set auto Every View. For full control use manual.

**Will it work in sliders or loops**Yes. auto Every View is ideal when slides re enter the viewport.

**How accurate is the final value**It always lands on the exact end value, including decimals.

**Can I control it with an interaction**Yes. Use manual playMode and connect a button or scroll action to the exposed Play action.

This component works beautifully for:

-   **Landing Pages**: Showcase milestones, revenue, or conversion boosts in a visually stunning way.
    
-   **Portfolio Sites**: Highlight projects completed, clients served, or awards won with engaging counters.
    
-   **E-Commerce Stores**: Show items sold, sales totals, or stock remaining in real-time.
    
-   **SaaS & Startups**: Display KPIs, sign-ups, or performance metrics that update on scroll for maximum impact.
    
-   **Nonprofits & Campaigns**: Animate donation totals, volunteer hours, or social reach in a way that inspires action.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #11064

## Details

- **Author**: Sadiq Abdulqudus
- **Price**: $5.00
- **Published**: 2025-08-22
- **Updated**: 2026-01-08
- **Added**: 2025-08-13
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step