vna

vue-number-animation

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

Showing:

Popularity

Downloads/wk

1.4K

GitHub Stars

28

Maintenance

Last Commit

2mos ago

Contributors

4

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Animation

Readme

Animated Counter - Number VueJS v2.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

PropertyDescriptionTypeDefault
toAnimation end pointNumber-

Optional Props

PropertyDescriptionTypeDefault
fromAnimation start pointNumber0
durationDuration of the animation (seconds)Number1
delayAmount of delay (seconds) before the animation startsNumber0
easingEase of the animationString'Power1.easeOut'
animationPausedPauses animation at starting pointBooleanfalse

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

EventDescription
@startCalled when the animation has started
@completeCalled when the animation has completed
@updateCalled every time the animation updates (on every frame while the animation is active)

Methods

MethodDescription
play()Starts the animation
pause()Pauses the animation
restart()Restarts and begins playing forward from the beginning

✔ License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial