🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Animation CSS Plugins Text Effect

Documentation

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


You May Also Like