This is a Vue 3 number plugin. It animates the number that you pass in prop.
npm install vue3-number-animationThis is a Vue number plugin. It animates the number that you pass in prop.
  !icon
https://codesandbox.io/s/8256nwlq78
Get the package:
``bash`
npm install vue-number-animation
Register Animate Number in your app:
`js
import Vue from 'vue'
import VueNumber from 'vue-number-animation'
Vue.use(VueNumber)
`
In your Vue file you can call it like this:
`html
:from="100"
:to="10000"
:format="theFormat"
:duration="5"
:delay="2"
easing="Power1.easeOut"/>
ref="number2"
:to="10000"
:duration="5"
easing="Back.easeIn"
@complete="completed"
@click="playAnimation"/>
`$3
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
>!eases
` 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 |
MIT