!Animated logo


vue-roller

Fluid and smooth rolling animation for Vue.js

Demo

!Animated Demo
!Animated 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
`ts

`
OR

src/main.ts (plugin)
`ts
import VueRoller from "vue-roller";
import "vue-roller/dist/style.css";

createApp(App).use(VueRoller)
`

Options

value (Required)

`html

`

Displays text.

default-value

`html

`

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

`html

`

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

char-set

`html



`

Sets the list of characters used for the animation.

Preset: number, alphabet
Default: number

Event: animation-end

`html

``

Call the event at the end of the animation.