@huasi/text-shuffle

Install

# with yarn
yarn add txt-shuffle

# with pnpm
pnpm i @huasi/text-shuffle

# with npm
npm i @huasi/text-shuffle

Usage

import shuffle from '@huasi/text-shuffle';

shuffle({
  text: 'Hello world! from Huasi.dev',
  onUpdate: shuffleStr => {
    console.log(shuffleStr);
  },
  onComplete: () => {
    console.log('Shuffle complete!');
  },
});

Props

text

Text to shuffle.

duration = DEFAULT_DURATION,

Animation duration in seconds.

delay

Time to spend before starting the animation.

delayResolve

Time to spend to resolving the animation.

fps

Frames per second.

glyphs

String of characters to use in the shuffle animation

Default: ' !#$&%()*+0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuüvwxyz{|}~'

animation

Animation type, possible values: show, hide, stay

direction

Direction of the animation, possible values: left, right, random

Methods

onUpdate = null,

Callback function to be called on each frame of the animation.

onUpdate = string => {
  console.log(string);
};

onComplete

Callback function to be called when the animation is complete.

onComplete = string => {
  console.log('Shuffle complete!', string);
};

License

MIT, see LICENSE for details.

References

• eases - License
• canvas-sketch-util - License
• txt-shuffle - License