Reveal Text With Scrambling Effect – shuffle-letters.js

Category: Animation , Javascript , Text | August 21, 2023
Author:georapbox
Views Total:123 views
Official Page:Go to website
Last Update:August 21, 2023
License:MIT

Preview:

Reveal Text With Scrambling Effect – shuffle-letters.js

Description:

shuffle-letters.js is a text animation JavaScript library for shuffling/scrambling text before revealing it.

How to use 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 target element. That’s it.

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

4. You can also animate the text to another…

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

5. Trigger a function after the animation has finished.

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

6. Config the scrambling effect.

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()

Changelog:

v1.1.0 (08/21/2023)

  • Separate digits from letters in the shuffle process. This makes the effect more predictable and consistent.

You Might Be Interested In:


Leave a Reply