Customizable Text Shuffle Animation In JavaScript – txt-shuffle

Preview:

Description:

An easy-to-use JavaScript library that helps developers create customizable text shuffling/scrambling animations to capture your audience’s attention.

By initially presenting an assortment of randomized characters, it simulates a text-shuffling effect that fluidly transitions into the intended target text.

Ideal for engaging headlines, CTA buttons, promotional offers, and more.

How to use it:

1. Install and import the txt-shuffle.

# NPM
$ npm i txt-shuffle

const { shuffle } = require('txt-shuffle');

2. Apply the shuffle animation to your text.

shuffle({ 
  text: 'CSSScript.Com',
});

3. Available options to customize the animation.

shuffle({ 
  // duration in seconds
  duration: 1,
  // delay in seconds
  delay: 0,
  // delay to start resolving
  delayResolve: 0.2,
  // FPS
  fps: 60,
  // characters to use in the shuffle animation
  glyphs: ' !#$&%()*+0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuüvwxyz{|}~',
  // `show`, `hide`, `stay`
  animation: 'show',
  // `left`, `right`, `random`
  direction: 'right',
  
});