Demo - Jquery Plugin For CSS3 Text Animations

Textillate.js combines some awing libraries to produce a ease-to-use plugin for applying CSS3 animations to any text.

Simply embody textillate.js and it's dependencies in your project to begin making unqiue effects.

Textillate.js is constructed on high of the straightforward, nonetheless surprisingly powerful animate.css and piece of writing.js libraries.

Features:

Easy to use and customizeable with CSS.
Multiple texts animation with minimal settings.
Set display time manually as you need.
Choose various type of animation from animate.css

How to use it:

1. Load the required JavaScript jquery.lettering.js and jquery.textillate.js in the HTML page.

<script src="/path/to/jquery.lettering.js"></script>
<script src="/path/to/jquery.textillate.js"></script>

2. Load the required Stylesheet animate.css in the HTML page.

<link rel="stylesheet" href="/path/to/animate.css">

3. The HTML structure to create a textillate animation.

<div class="tlt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

4. Initialize the textillate and we're ready to go.

$(function () {
  $('.tlt').textillate({
    loop: true,
    in:{
      effect: 'flipInX'
    },
    out: {
      effect: 'fadeOut'
    }
  });
});

Plugin's default configuration options:

$('.tlt').textillate({
  selector: '.texts',
  loop: false,
  minDisplayTime: 2000,
  initialDelay: 0,
  autoStart: true,
  inEffects: [],
  outEffects: [ 'hinge' ],
  in: {
    effect: 'fadeInLeftBig',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  callback: function () {},
  type: 'char'
});

Plugin's Options:

Name	Default	Type	Description
selector	`.texts`	string	the default selector to use when detecting multiple texts to animate
loop	`false`	boolean	enable looping
minDisplayTime	`2000`	number	sets the minimum display time for each text before it is replaced
initialDelay	`0`	number	sets the initial delay before starting the animation (note that depending on the in effect you may need to manually apply visibility: hidden to the element before running this plugin)
autoStart	`true`	boolean	set whether or not to automatically start animating
inEffects	`null`		custom set of 'in' effects. This effects whether or not the character is shown/hidden before or after an animation
outEffects	`hinge`		custom set of 'out' effects
in: in animation settings
effect	`fadeInLeftBig`	string	set the effect name
delayScale	`1.5`	number	set the delay factor applied to each consecutive character
delay	`50`	number	set the delay between each character
sync	`false`	boolean	set to true to animate all the characters at the same time
shuffle	`false`	boolean	randomize the character sequence (note that shuffle doesn't make sense with sync = true)
reverse	`false`	boolean	reverse the character sequence (note that reverse doesn't make sense with sync = true)
callback	`function`	null	callback that executes once the animation has finished
out: out animation settings.
effect	`hinge`	string	set the effect name
delayScale	`1.5`	number	set the delay factor applied to each consecutive character
delay	`50`	number	set the delay between each character
sync	`false`	boolean	set to true to animate all the characters at the same time
shuffle	`false`	boolean	randomize the character sequence (note that shuffle doesn't make sense with sync = true)
reverse	`false`	boolean	reverse the character sequence (note that reverse doesn't make sense with sync = true)
callback	`function`	null	callback that executes once the animation has finished