vue-number-animation

    1.1.2 • Public • Published

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

    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

    Install

    npm i vue-number-animation

    DownloadsWeekly Downloads

    4,718

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    7 kB

    Total Files

    5

    Last publish

    Collaborators

    • nkoik