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

| Property | Description | Type | Default | |:--|:--|:--|:--| | to | Animation end point | Number | - |

Optional Props

| Property | Description | Type | Default | |:--|:--|:--|:--| | 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 | '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) |

Methods

| Method | Description | |:--|:--| | play() | Starts the animation | | pause() | Pauses the animation | | restart() | Restarts and begins playing forward from the beginning |

✔ License

MIT