Author: | georapbox |
---|---|
Views Total: | 123 views |
Official Page: | Go to website |
Last Update: | August 21, 2023 |
License: | MIT |
Preview:

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.