by jschr

jschr / textillate

A jquery plugin for CSS3 text animations.

3.5K Stars 763 Forks Last release: over 5 years ago (0.4.0) MIT License 83 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Textillate.js v0.4.1 JS.ORG

See a live demo here.

Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.


Let's start with the basic markup:

My Title

And your JavaScript should look like this:

$(function () {

This will animate using the default options. To change the defaults, you can either use the html data api:


or pass in options on initialization (see full list of options below):

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

You can also tell textillate.js to animate a list with the following markup:

  • Some Title
  • Another Title


Notice that you can control the animation parameters on each text (

  • ) using the data api.


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


      // 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' });


    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


    • $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

  • We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.