vue-animated-number's Introduction

Animated Counter - Number

This is a Vue number plugin. It animates the number that you pass in prop.

✔ Demo

✔ Installation

Get the package:

npm install vue-number-animation

✔ Use

import Vue from 'vue'
import VueNumber from 'vue-number-animation'

Vue.use(VueNumber)

In your Vue file you can call it like this:

<number
    ref="number1"
	:from="100"
	:to="10000"
	:format="theFormat"
	:duration="5"
    :delay="2"
    easing="Power1.easeOut"/>

<number
    animationPaused
    ref="number2"
	:to="10000"
	:duration="5"
    easing="Back.easeIn"
    @complete="completed"
    @click="playAnimation"/>

<script>
export default {
    // Sets the format of the number
    methods: {
        theFormat(number) {
            return number.toFixed(2);
        },
        completed() {
            console.log('Animation ends!');
        },
        playAnimation() {
            this.$refs.number2.play()
        }
    }
}
</script>

API

Required Prop

Property	Description	Type	Default
to	Animation end point	Number	-

Optional Props

Property	Description	Type	Default
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	'Power1.easeOut'
animationPaused	Pauses animation at starting point	Boolean	false

Easing prop

Choose from various eases to control the rate of change during the animation. These are all the values that the prop gets. https://greensock.com/docs/Easing

Don't forget the '.' between ease name eg. 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)