Press "Enter" to skip to content

A JavaScript Library to Shuffle the Text Content of a DOM Element | shuffle-letters.js

shuffle-letter.js is a JavaScript library to alter the text content of a DOM element with an animated effect.

gsap scramble text, text scramble effect css, scramble text javascript, text reveal animation, decoding text effect, canvas text animation effects, shuffle text animation

Note: This library is a vanilla JavaScript port of the Shuffle Letters Effect jQuery plug-in.

How to make use of it:

1. Install and import the shuffle letters with NPM.

# NPM
$ npm i shuffle-letters --save
import shuffleLetters from 'shuffle-letters';

2. Or load the shuffle-letters.js from a CDN.

<script src=”https://unpkg.com/shuffle-letters”></script>

3. Initialize the shuffle letters on the goal component.

<h1>shuffle-letters.js Examples</h1>
shuffleLetters(document.querySelector('h1'));

4. You may also animate the text in a different.

shuffleLetters(document.querySelector('h1'), {
  text: 'Yet another title',
});

5. Trigger a function after the animation has completed.

shuffleLetters(document.querySelector('h1'), {
  onComplete: el => {
    // ...
  }
});

6. Config the scrambling impact.

shuffleLetters(document.querySelector('h1'), {

  // number of times the characters will be shuffled
  iterations: 8,

  // the amount of frames per second
  fps: 30,
  
});

7. Clear the shuffled text.

clearShuffleLetters();

Reveal Text With Scrambling Effect, shuffle-letters.js Plugin/Github, text reveal animation js


See Demo And Download

Official Website(georapbox): Click Here

This superior jQuery/javascript plugin is developed by georapbox. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *