Smooth Number & String Rolling Counter Animation In Vue.js

animated-number-counter-javascript

vue-roller is a flexible, smooth-rolling number counter animation of a Vue.js component that applies a high-performance animation to the text and numbers you select.

free number counter animation, animated number counter javascript, number counter animation generator, vuejs number increment animation

How to make use of it:

Install and download:

# NPM
$ npm install vue-roller --save

1. Import and register the vue-roller.

import Roller from "vue-roller";
export default {
       components:{
         Roller
         ...
       }
       ...
}

2. Add the roller component to your template and select the content you want to apply the rolling animation to.

<Roller text="wcf"></Roller>

3. Set the duration of the rolling animation.

<Roller transition=".8"></Roller>

4. Display thousands of separators for numeric values.

<Roller isNumberFormat="true"></Roller>

5. Select the initial text that will be displayed before the animation begins.

<Roller defaultChar="vue"></Roller>

6. Select a set of characters used for the rolling animation. Default: [“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”].

<Roller :charList="['v', 'u', 'e']"></Roller>

Smooth Text & Number Rolling Animation, vue-roller Plugin/Github


See Demo And Download

Official Website(Andy-0414): Click Here

This superior jQuery/javascript plugin is developed by Andy-0414. For extra advanced usage, please go to the official website.