JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Textillate

    A simple plugin for CSS3 text animations
    Filed under 

    • 🔾61%Overall
    • 3,313
    • 25.9 days
    • 🕩735
    • 👥16

    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

    Show All