Documentation

Documentation

AnimateNumber

Checking Motion+ status…

AnimateNumber

is exclusive to Motion+

290+ examples & 35+ tutorials

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

One-time payment, lifetime updates

Already joined?

Checking Motion+ status…

AnimateNumber

is exclusive to Motion+

290+ examples & 35+ tutorials

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

One-time payment, lifetime updates

Already joined?

Checking Motion+ status…

AnimateNumber

is exclusive to Motion+

290+ examples & 35+ tutorials

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

One-time payment, lifetime updates

Already joined?

AnimateNumber creates beautiful number animations with Motion.

<AnimateNumber>{count}</AnimateNumber>

You can create a number of popular animation effects, like countdowns, engagement bars, or labelling user inputs.

It's a continuation of the original version of Max Barvian's NumberFlow component, which was built on Motion.

Because AnimateNumber leverages Motion's existing layout animations, it's only 2.5kb on top of Motion for React. It also means you can use Motion's existing transition settings.

However, being based on an older version of NumberFlow means it currently lacks a couple of its newer props like trend and plugins.

In this guide, we'll learn how to install AnimateNumber into our projects, and how to use it for a variety of number animation effects.

Related topics

Motion+

Motion+

Motion+

Level up your animations with Motion+

Unlock the full vault of 290+ Motion examples, premium APIs, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Motion is supported by the best in the industry.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.