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 |