A JavaScript library to shuffle the text content of a DOM element with an animated effect.
npm install shuffle-letters!build
A JavaScript library to shuffle the text content of a DOM element with an animated effect.
> NOTE: This library is a port to vanilla JavaScript of the Shuffle Letters Effect jQuery plugin.
Check here for a live demo.
``sh`
$ npm install shuffle-letters --save
The library is exported in UMD, CommonJS, and ESM formats. You can import it the following ways:
`js`
import shuffleLetters from 'shuffle-letters';
`js
const shuffleLetters = require('shuffle-letters');
// If you use a bundler like Webpack, you may need to import it the following way
// as it might try to use the ESM module instead of the CommonJS.
const shuffleLetters = require('shuffle-letters').default;
`
html
`API
js
shuffleLetters(element, [config])
`$3
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| element | HTMLElement | | The HTML element whose
we want to apply the shuffle effect. |
| [config] | object | {} | Configurable object to override the default options. |
| [config.text] | string | "''" | Alternative text that can be used instead of the textContent of the element. |
| [config.iterations] | number | 8 | The number of times the characters will be shuffled before the animation ends. |
| [config.fps] | number | 30 | The amount of frames per second that the animation runs. |
| [config.onComplete] | function | () => void | A callback function that is called when the animation of the effect is complete. |Returns: function - Returns a function that when called, it clears the
timeoutID which identifies the timer created by the call to setTimeout() that is used internally for the shuffle effect. Useful for cleanup purposes, for example when you want to remove the element before the animation is completed.Usage examples
$3
#### HTML
`html
This is a funcy title
`#### JavaScript
js
shuffleLetters(document.querySelector('h1'));
`$3
#### HTML
html
This is a funcy title
`#### JavaScript
js
shuffleLetters(document.querySelector('h1'), {
text: 'Yet another funcy title',
iterations: 12,
fps: 60,
onComplete: el => {
console.log('Effect was completed.');
console.log(el);
}
});
`$3
#### HTML
html
- List item 1
- List item 2
- List item 3
- List item 4
`#### JavaScript
js
const list = document.querySelector('ul');
const listItems = list.querySelectorAll('li');Array.prototype.forEach.call(listItems, (element, index) => {
shuffleLetters(element, {
onComplete: elm => {
if (index === listItems.length - 1) {
console.log('All effects were completed');
}
}
});
});
`$3
#### HTML
html
This is a funcy title
`#### JavaScript
js
const clearShuffleLetters = shuffleLetters(document.querySelector('h1'), {
iterations: 200
});
// Cleanup after 1 second
setTimeout(() => clearShuffleLetters(), 1000);
``