Animated Text Reveal Effect – Animated Texts

Category: Animation , Javascript , Text | September 28, 2021
Author:cristyz
Views Total:128 views
Official Page:Go to website
Last Update:September 28, 2021
License:MIT

Preview:

Animated Text Reveal Effect – Animated Texts

Description:

Animated Texts is a JavaScript library for revealing text with a cool fly-in effect.

How to use it:

1. Add the minified version of the Animated Texts library to the page.

<script src="dist/animated_texts.min.js"></script>

2. Reveal your text character by character.

<p class="animated__text">
  Your Content Here
</p>
LettersRandomPlaces({
  element: ".animated__text",
  // options here
})

3. Reveal your text word by word.

<p class="animated__word">
  Your Content Here
</p>
WordsRandomPlaces({
  element: ".animated__word",
  // options here
})

4. Config the reveal animation.

LettersRandomPlaces({
  element: ".animated__text",

  // delay in ms
  start_delay_time: 1000,

  // or 'random'
  delay_type: "sequential",

  // duration of the animation
  animation_duration: 250,

  // type: number
  force: 300,

  // direction
  direction: ['x', 'y'],

  // scale text randomly
  random_scale: false,

  // -1 for random
  rotate: -1,
})

You Might Be Interested In:


Leave a Reply