JavaScript-Library-to-Create-Impressive-Text-Animations

[Distortion] JavaScript Library to Create Impressive Text Animations | textAnimation.js

by

Text Animation is a small and dynamic library that helps you create a distortion effect for text by scramble/shuffling characters. A collection of code examples for free animation effects.

javascript text animations library, text animation css, anime js text animation, text animation html, floating text animation css

How to make use of it:

1. Load the textAnimation.js within the doc.

<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 = ["find", "learn", "apply"];

3. Create a container through which you wish 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();

Reveal Text With A Distortion Effect, Text Animation Plugin/Github

See Demo And Download

Demo
Download

Official Website(paniaguaadrian): Click Here

This superior jQuery/javascript plugin is developed by paniaguaadrian. For extra Advanced Usages, please go to the official website.

Leave a Comment