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.