Reveal Text With A Distortion Effect – textAnimation.js

Category: Animation , Javascript | October 31, 2020
Views Total:424 views
Official Page:Go to website
Last Update:October 31, 2020


Reveal Text With A Distortion Effect – textAnimation.js


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;

You Might Be Interested In:

Leave a Reply