text-scrambler

A text scrambler/shuffler Vue component

Installation

npm install text-scrambler

Usage

import TextScrambler from 'text-scrambler';

let text = "Hello";

<TextScrambler :text="text"/>

setTimeout(() => text = "There!", 2000)

As soon as the text variable changes, the component will animate the previous text to the new text while adding a text scramble effect.

The text scrambling logic has been yanked from this pen https://codepen.io/soulwire/pen/mErPAK by Justin Wendle (https://codepen.io/soulwire/)

Props

props: {
        text: String,
        disableInitialScramble: Boolean,
        scrambleDuration: {
            type: Number,
            default: 20
        },
        scrambleCharacterSet: {
            type: String,
            default: '!<>-_\\/[]{}—=+*^?#________'
        }
    }