vue3-number-animation

2.0.0 • Public • Published

Animated Counter - Number VueJS v3.x compatible

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

GitHub license npm icon

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
    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

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

License

MIT

Package Sidebar

Install

npm i vue3-number-animation

Weekly Downloads

23

Version

2.0.0

License

MIT

Unpacked Size

6.89 kB

Total Files

5

Last publish

Collaborators

  • riderx