@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.

| Type | Required | Default | | ------ | -------- | ------- | | string | true | '' |

duration = DEFAULT_DURATION,

Animation duration in seconds.

| Type | Required | Default | | ------ | -------- | ------- | | number | false | 1 |

delay

Time to spend before starting the animation.

| Type | Required | Default | | ------ | -------- | ------- | | number | false | 0 |

delayResolve

Time to spend to resolving the animation.

| Type | Required | Default | | ------ | -------- | ------- | | number | false | 0.2 |

fps

Frames per second.

| Type | Required | Default | | ------ | -------- | ------- | | number | false | 60 |

glyphs

String of characters to use in the shuffle animation

| Type | Required | | ------ | -------- | | string | false |

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

animation

Animation type, possible values: show, hide, stay

| Type | Required | Default | | ------ | -------- | ------- | | string | false | 'show' |

direction

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

| Type | Required | Default | | ------ | -------- | ------- | | string | false | 'left' |

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