Fluid and smooth rolling animation for Vue.js

Demo

Try out here with your own text!

Getting Started

Vue2 (legacy)

npm i vue-roller@1.12.7

Vue3 (recommended)

npm i vue-roller

setup script

<script setup lang="ts">
import { Roller } from "vue-roller";
import "vue-roller/dist/style.css";
</script>

OR

src/main.ts (plugin)

import VueRoller from "vue-roller";
import "vue-roller/dist/style.css";

createApp(App).use(VueRoller)

Options

value (Required)

<Roller value="1234"></Roller>

Displays text.

default-value

<Roller default-value="1111"></Roller>

Sets the text to display when the page is first loaded (before the animation actually starts).

Must be included in char-set.

"" by default.

duration

<Roller :duration="1000"></Roller>

Sets the time for the animation to complete in millisecond(ms). 500 by default.

char-set

<Roller :char-set="number"></Roller>
<Roller :char-set="alphabet"></Roller>
<Roller :char-set="['hello', 'hello', 'hello']"></Roller>

Sets the list of characters used for the animation.

Preset: number, alphabet Default: number

Event: animation-end

<Roller @animation-end="event"></Roller>

Call the event at the end of the animation.