jQuery Text Animation Plugin with CSS3 - textillate

textillate is a simple jQuery plugin for creating awesome text animation effects using Animate.css powered CSS3 animations.

How It Works:

The plugin uses lettering plugin to break down text into characters (or words) and then applies CSS3 animations of your choice to each of them.

See also:

• 10 Best Text Animation Plugins In JavaScript/jQuery

How to use it:

1. Include jQuery library and other dependency files on the page.

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

2. Include the needed Animate.css for CSS3 animations.

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

3. Define your own text to be animated.

<div class="demo">
  jQuery Script
</div>

4. Call the function on the container and done.

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

5. Specify the type of CSS3 animation you want to use.

<!-- Via HTML Data Attributes -->
<div class="demo"
     data-out-effect="fadeOut" 
     data-in-effect="fadeIn"
     data-out-shuffle="true">
     jQuery Script
</div>

// OR Via JavaScript
$('.demo').textillate({
  in: {
    effect: 'fadeInLeftBig',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    reverse: false,
    shuffle: false,
    callback: function () {}
  },
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    reverse: false,
    shuffle: false,
    callback: function () {}
  },
});

6. More plugin options to customize the text animation.

$('.demo').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' ],

  // callback that executes once textillate has finished
  callback: function () {},

  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'

});

7. API methods.

// start the animation
$('.demo').textillate('start');

// pause/stop the animation
$('.demo').textillate('stop');

// trigger in/out animations
$('.demo').textillate('in');
$('.demo').textillate('out');

8. Event handlers.

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

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

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

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

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

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

Changelog:

2021-03-05

• Doc updated

2016-11-09

• Support styling based on currently active item

---

This awesome jQuery plugin is developed by jschr. For more Advanced Usages, please check the demo page or visit the official website.