---
title: "Before After Counter — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Isaac Yi · Interactive. Counts the change, not the number."
canonical: "https://framer.elliotli.dev/component/before-after-counter"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Before After Counter

# Before After Counter

Counts the change, not the number.

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

![Before After Counter preview image 1](https://framer.elliotli.dev/og/component/before-after-counter/94031891f86a3f1f/1600x912.jpg)

## Summary

Counts the change, not the number.

## Description

Most counter components animate one number. This one animates the change.

Each card shows where a number started, where it ended, and the gain between

them — all three counting up together when the section scrolls into view.

That is the shape of a proof block: not "1,480 students" but "1,280 → 1,480."

WHY THE GAIN CHIP STAYS GREEN

A gain is not always a bigger number. Weight, cost, churn, load time, support

tickets — in half the categories that matter, going down is the win. The chip

flips its arrow and keeps the green either way, so the same section works for

a tutor showing score lifts and an agency showing bounce rate cut in half.

WHAT YOU GET

— Two numbers per card. Type the before and the after; the gain is calculated

and animated for you.

— Counts up once, when the section scrolls into view. Static in the Framer

canvas, so your layout never jitters while you design.

— Any number of cards in a grid that reflows on its own.

— Per card: label, prefix, suffix, timeframe, and a note line — for units,

dates, or the source of the number.

— Light and dark themes, an accent color, and a section background that is

transparent by default so it drops onto your existing page.

— Section eyebrow, heading, subheading, and a footnote for disclaimers.

— Zero external libraries, zero layout shift. Pure React and CSS.

Everything is configured from the properties panel. No code, no chart

library, no CMS.

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

-   All · #9264

## Details

- **Author**: Isaac Yi
- **Price**: $10.00
- **Published**: 2026-08-25
- **Updated**: 2026-10-05
- **Added**: 2026-08-25
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase