Fluid and Smooth Text & Number Rolling Animation For Vue.js


Roller is a component of Vue.js that applies a high-performance, smooth-rolling animation Toggle CharList to the text and numbers counter you select.

free number counter animation, css number counter animation, vue number counter animation on scroll, animated number counter javascript

How to make use of it:

Install and download:

$ npm install vue-roller --save

1. Import and record the roller.

import Roller from "vue-roller";
export default {

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

<Roller text="1234"></Roller>

3. Set the duration of the rolling animation.

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

4. Show 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="['w', 'c', 'f']"></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 Usages, please go to the official website.