Animated Number Vue 3 & 2

npm

Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x. This plugin provides animated transitions for numeric values, enhancing the visual appeal of numerical data in Vue.js applications.

icon

Key Features:

Vue 3 & 2 (with animejs) is supported in version 2.x.x.

Vue 2 (with gsap) is supported in version 1.x.x.

Demo:

Explore the demos:

for version 1.x.x
for version 2.x.x

Installation:

To integrate the Animated Number Vue plugin into your project, follow the installation steps below.

npm install vue-number-animation

For Vue versions <=2.6 and vue-number-animation@2.x.x, ensure you also install @vue/composition-api.

Usage:

// For version 2.x.x - import the component as usual
import NumberAnimation from "vue-number-animation";

// For version 1.x.x
import Vue from "vue";
import VueNumber from "vue-number-animation";

Vue.use(VueNumber);

In your Vue file, utilize the Animated Number component:

// For version 2.x.x
<NumberAnimation
    ref="number1"
    :from="100"
    :to="10000"
    :format="theFormat"
    :duration="5"
    autoplay
    easing="linear"
/>

// For version 1.x.x
<number
    tag="div"
    animationPaused
    ref="number2"
    :to="10000"
    :duration="5"
    easing="Back.easeIn"
    @complete="completed"
    @click="playAnimation"/>

API:

Property	Description	Type	Default
to	Animation end point	number	100
tag	Element wrapper	string	'span'
from	Animation start point	number	0
duration	Duration of the animation (seconds)	number	1
delay	Amount of delay (seconds) before the animation starts	number	0
easing	Ease of the animation	string	'linear' (for version 2.x.x) / 'Power1.easeOut' (for version 1.x.x)
autoplay (for version 2.x.x) / animationPaused (for version 1.x.x)	Pauses animation at starting point	boolean	true (for version 2.x.x) / false (for version 1.x.x)

Easing:

For version 2.x.x: Choose from various eases to control the rate of change during the animation. Refer to animejs documentation.
For version 1.x.x: Choose from various eases to control the rate of change during the animation. Refer to GreenSock Easing documentation. Don't forget the '.' between ease name, e.g., Circ.easeInOut.

Events:

Event	Description
start	Called when the animation has started
complete	Called when the animation has completed
update	Called every time the animation updates (on every frame while the animation is active)

Methods:

Method	Description
play	Starts the animation
pause	Pauses the animation
restart	Restarts and begins playing forward from the beginning

nkoik / vue-animated-number

readme