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:
<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 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
});
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
![[enhancement] Add missing bower.json.](https://avatars.githubusercontent.com/u/1223889?v=4)
7.4k Dec 23, 2022
4.7k Jan 4, 2023
4.7k Dec 30, 2022
37k Jan 2, 2023
76.7k Dec 30, 2022
7.5k Jan 6, 2023
6 Jun 23, 2022
34 Nov 25, 2022
3.8k Dec 17, 2022
721 Dec 6, 2022
376 Dec 29, 2022
3.5k Dec 21, 2022
1.8k Dec 29, 2022
762 Dec 20, 2022
4.5k Dec 21, 2022
165 Dec 12, 2022
34.3k Dec 30, 2022
3 May 18, 2022
4 May 3, 2022