Skip to content

- Star 1,833
- Fork 366

# jschr/textillate

### HTTPS clone URL

### Subversion checkout URL

You can clone with HTTPS or Subversion.

Clone in Desktop Download ZIP
A simple plugin for CSS3 text animations

http://jschr.github.com/textillate/

- 57 commits
- 2 branches
- 0 releases
- 9 contributors

1. CSS 86.7%
2. JavaScript 13.3%

CSS JavaScript
branch: master
Switch branches/tags

- Branches
- Tags

gh-pages
master
Nothing to show
Nothing to show
textillate/

Merge pull request #60 from urecio/initdelay-in-manual-start …

    fix(initially): fixes init delay on manual start

latest commit 0e1cdef17e
jschr authored on Nov 4

| Failed to load latest commit information.
| assets | added ability to reverse the character sequence | a year ago
| LICENSE | Update LICENSE | 9 months ago
| README.md | version bump | 3 months ago
| index.html | removed redundant dark.css | 4 months ago
| jquery.textillate.js | fix(initially): fixes init delay on manual start | a month ago

### README.md

# Textillate.js v0.3.2

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:

- jQuery
- lettering.js
- animate.css

## 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 () {}
    });

## 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 in 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

- textillate.js + bounce.js

Something went wrong with that request. Please try again.