vue-roller

Fluid and smooth rolling animation for Vue.js

Demo

Try out here with your own text!

Getting Started

npm (Vue.js 2)

npm i [email protected]

Vue

import Roller from "vue-roller";

export default {
    components:{
        Roller
    }
}
...

Vue-typescript

import Roller from "vue-roller";

@Component({
	components: { Roller }
})
...

Options

text (Required)

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

Displays text.

transition

<Roller :transition="1"></Roller>

Sets the time for the animation to complete in second(s). 0.5 by default.

isNumberFormat

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

Can be set to true if you want to display commas as thousands separators. false by default.

isStatic

<Roller :isStatic="true"></Roller>

default : false Used for disposable animation. (Performance improvement)

charList

<Roller :charList="['a', 'b', 'c']"></Roller>

Sets the list of characters used for the animation.

Default: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

defaultChar

<Roller defaultChar="0"></Roller>

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

Must be included in charList.

"" by default.

wordWrap

<Roller :wordWrap="20"></Roller>

Sets the number of line break characters (word-break: keep-all)

0 by default. (word-break: break-all)

Event : animationend

<Roller @animationend="event"></Roller>

Call the event at the end of the animation.

Style

<Roller class="roller"></Roller>

<style>
	.roller .rollerBlock {
		font-family: ~~~;
		margin: 20px;
	}
</style>