Documentation

Documentation

Vue
AnimateNumber

AnimateNumber

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

AnimateNumber creates beautiful number animations with Motion.

<AnimateNumber :value="count"/>

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 3.6kb on top of Motion for Vue. 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.

Motion is made possible thanks to our amazing sponsors.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.