Animated Text Reveal Effect – Animated Texts

Preview:

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,
})