@667/vue-number-animation v1.1.2

Animated Counter - Number

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

✔ Demo

https://codesandbox.io/s/8256nwlq78

✔ Installation

Get the package:

npm install vue-number-animation

✔ Use

Register Animate Number in your app:

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
    tag="div"
    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

Optional Props

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

Methods

✔ License

MIT