Dependencies

To start using textillate.js, you will need the following:

• jQuery
• lettering.js
• animate.css

Options

$('.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
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  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 sense with sync = true)
shuffle: false,

// reverse the character sequence
// (note that reverse doesn't make sense with sync = true)
reverse: false,

// callback that executes once the animation has finished
callback: function () {}
  },
  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  // callback that executes once textillate has finished
  callback: function () {},
  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});

Events

Textillate triggers the following events:

• start.tlt

  - triggered when textillate starts

• inAnimationBegin.tlt

  - triggered when the in animation begins

• inAnimationEnd.tlt

  - triggered when the in animation ends

• outAnimationBegin.tlt

  - triggered when the out animation begins

• outAnimationEnd.tlt

  - triggered when the out animation ends

• end.tlt

  - triggered when textillate ends

$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

Methods

• $element.textillate('start')

  - Manually start/restart textillate

• $element.textillate('stop')

  - Manually pause/stop textillate

• $element.textillate('in')

  - Trigger the current text's in animation

• $element.textillate('out')

  - Trigger the current text's out animation

Code Samples

• textillate.js + bounce.js