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.
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.
To start using textillate.js, you will need the following:
$('.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'
});Textillate triggers the following events:
start.tlt- triggered when textillate startsinAnimationBegin.tlt- triggered when the in animation beginsinAnimationEnd.tlt- triggered when the in animation endsoutAnimationBegin.tlt- triggered when the out animation beginsoutAnimationEnd.tlt- triggered when the out animation endsend.tlt- triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () {
// do something
});$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