1.3.2 • Published 4 years ago
vue-animate-shuffle
Play shuffle animation for given string 🎬
Install
npm i vue-animate-shuffle
import AnimateShuffle from "vue-animate-shuffle";
export default {
name: "FooBar",
components: {
AnimateShuffle,
},
};
Usage
<animate-shuffle
animation-string="foobar"
chars-pool="abcdefghijklmnopqrstuvwxyz"
/>
Props
Prop | Type | Required | Default | Description |
---|
animation-string | String | true | "" | String for being animated |
chars-pool | Array | String | true | [] | Pool of chars for animation tick |
char-update-delay | Number | false | 50 | Delay before animation tick for every char |
char-animation-duration | Number | false | 1000 | Animation duration for every char |
starting-animation-delay | Number | false | 0 | Delay before initial render |
container-element-tag | String | false | div | Tag for the container element |
char-element-tag | String | false | span | Tag for char element |
char-animation-complete-class | String | false | "" | Class that being added on char animation complete |
char-class | String | false | "" | Class for every char element |
disabled | Boolean | false | false | Disable animation |
Events
Event | Payload | Description |
---|
char-animation-complete | { index: <completed char index>, char: <completed char symbol> } | Called on char animation complete |
string-animation-complete | { renderedString: <complete rendered string> } | Called on all strings have been animated |
Slots
Name | Description |
---|
None (default) | Placeholder text for showing when starting-animation-delay is active and there is no initial render yet |