Home
Animation
Smooth Text & Number Rolling Animation In Vue.js – vue-roller

Smooth Text & Number Rolling Animation In Vue.js – vue-roller

Andy-0414 Last Updated: 4 months ago

roller is a Vue.js component that applies a performant and smooth rolling animation to text & numbers you specify.

How to use it:

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 specify the content on which you want to apply the rolling animation.

<Roller text="vuescript"></Roller>

3. Determine the duration of the rolling animation. Default: 0.5.

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

4. Show thousands separators for numeric values. Default: false.

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

5. Specify the initial text to show before starting the animation.

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

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

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

Preview:

Smooth Text & Number Rolling Animation In Vue.js - vue-roller

Changelog:

06/08/2023

  • v3.1.0: Update

05/29/2023

  • v3.0.0: Update

07/05/2022

  • v2.0.0: Update

09/23/2020

  • v1.12.4: Update string copy

07/31/2020

  • v1.12.3: bugfix

07/31/2020

  • v1.12.2: bugfix

07/24/2020

  • v1.12.1: fix defaultChar bug

07/20/2020

  • v1.11.2: Update fix copy bug

07/20/2020

  • v1.10.0

07/04/2020

  • v1.9.0

Download Details:

Author: Andy-0414

Live Demo: https://andy-0414.github.io/vue-roller/

Download Link: https://github.com/Andy-0414/vue-roller/archive/master.zip

Official Website: https://github.com/Andy-0414/vue-roller

Install & Download:

# NPM
$ npm install vue-roller --save

Related Posts

Add Comment