First, let me tell you what this Textillate.js does. It’s a very simple clean and neat js script which then combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. This script uses the animate.css on the text objects to give a perfect animating effects over the text.

Read: 15 Mind Blowing CSS3 Libraries

Usage

The basic usage of this script is to start by putting this simple HTML tag into your HTML page, where you can see a class attribute within the HTML code below which plays a good role in that first heading code:

<h1 class="tlt">My Title</h1>

You know the javascript will looks like this:

$(function () {
$('.tlt').textillate();
})

Again you can see we are calling the function tlt into our javascript code above. However, we can then animate the text (First Heading h1) markup using the default options. To change the defaults, you can either use the html data api:

<h1 class="tlt" data-in-effect="rollIn">Tittle</h1>

To test the taste of other awesome options provided by this script you must take a look on the following list of options below, however here you can only use rollIn effect on the text first heading (h1):

$('.tlt').textillate({ in: { effect: 'rollIn' } });

The following markup is used to animate text with:

<ul class="texts">
	<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
	<li data-in-effect="fadeIn">Another Title</li>
</ul>

Note: You can also handle the animating parameters on each text by using the HTML tag <li> here.

List of Options by textillate.js

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
    // set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

    // set to true to animate all the characters at the same time
    sync: false,

    // randomize the character sequence
    // (note that shuffle doesn't make sence in sync = true)
    shuffle: false
  },

  // out animation settings
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
  }
});

Get Textillate