scrambleText NEW
Animates text with character-by-character scramble and reveal effect.
scrambleText() returns a function-based tween value that progressively reveals the target's text content through a scramble animation. It is used directly as a property value in animate().
import { scrambleText } from 'animejs';
animate(target, { innerHTML: scrambleText(parameters) });Or imported as a standalone module from the 'animejs/text' subpath:
import { scrambleText } from 'animejs/text';Parameters
| Name | Accepts |
|---|---|
| parameters (opt) | An Object of scrambleText parameters |
Returns
A function-based tween value compatible with animate().
innerHTML is recommended over textContent because scrambleText internally uses to preserve spaces, which requires HTML parsing.
scrambleText code example
import { animate, scrambleText } from 'animejs';
animate('p', {
innerHTML: scrambleText(),
loop: true,
loopDelay: 1000,
});<div class="large row">
<p class="text-s text-mono">scrambleText() allows you to reveal a text via a smooth randomized character scramble transition effect.</p>
</div>
In this section