Reveal Text With A Distortion Effect – textAnimation.js

Preview:

Description:

A tiny and dynamic text animation library that helps you create a text distortion effect by scramble/shuffling characters.

How to use it:

1. Load the textAnimation.js in the document.

<script src="textAnimation.js"></script>/pre>
2. Define an array of strings through which you want to rotate with a text scramble effect.

const phrases = ["CSS", "Script", "COM!"];

3. Create a container in which you want to reveal the text.

<h2 class="text"></h2>
4. Initialize the library and start the animation.

const el = document.querySelector(".text");
const fx = new TextScramble(el);
let counter = 0;
const next = () => {
  fx.setText(phrases[counter]).then(() => {
    setTimeout(next, 1500);
  });
  counter = (counter + 1) % phrases.length;
};
next();