GitHub - jschr/textillate: A jquery plugin for CSS3 text animations. (original) (raw)

Textillate.js v0.4.1

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:

My Title

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:

Title

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

// 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

• textillate.js + bounce.js