Textualizer

A jQuery text animation plugin

View on GitHub

# Demo

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
  duration: 1000,          // Time (ms) each blurb will remain on screen
  rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
  effect: 'random',        // Animation effect the characters use to appear
  centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

# API

.textualizer('pause')

Pauses all animation at the next blurb. That is, once all characters have finished moving to their position, the animation will pause.

.textualizer('stop')

Stops the animation, and removes the blurbs.

.textualizer('destroy')

Destroy and disposes of the textualizer instance.


# Events

.on('textualizer.changed')

Triggers when a blurb has completed animating, before switching to the next blurb in the list.


txt.on('textualizer.changed', function(event, args) {
  // check if it's the last index in the array
  if (args.index === LAST_INDEX) {
    txt.textualizer('pause');
  }
});

txt.textualizer('start');