Popularity
6.0
Growing
Activity
0.0
Stable
3,561
170
767

Description

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.

Code Quality Rank: L5
Programming language: JavaScript
License: MIT License
Tags: Animations    
Latest version: v0.4.0

textillate alternatives and similar libraries

Based on the "Animations" category.
Alternatively, view textillate alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of textillate or a related project?

Add another 'Animations' Library

README

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.

Usage

Let's start with the basic markup:

<h1 class="tlt">My Title</h1>

And your JavaScript should look like this:

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

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

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

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:

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>
$('.tlt').textillate();

Notice that you can control the animation parameters on each text (<li>) using the data api.

Dependencies

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

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