Reveal Text With A Distortion Effect – textAnimation.js

Category: Animation , Javascript | October 31, 2020
Author:paniaguaadrian
Views Total:333 views
Official Page:Go to website
Last Update:October 31, 2020
License:MIT

Preview:

Reveal Text With A Distortion Effect – textAnimation.js

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();

You Might Be Interested In:


Leave a Reply