Textillate.js - Animate Text With CSS3

Textillate.js is an amazing jQuery plugin that creates stunning CSS3 text animation. Although, there are some other jQuery plugins linke Animate.css that lets you animate text, but it only animated wholly, not letter by letter. With Testillate.js, you can easily animate your text the way you want. It provides animation effects such as flash, bounce, shake, swing, flip and more.

Textillate.js needs a few dependencies before it is ready for use. They are Animate.css, Lettering.js and jQuery. After you’ve got the files downloaded, include them in your project, like so:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>

And also include the Animate.css library in the head section.

<link href="css/animate.css" rel="stylesheet">

Textillate.js uses in and out animation. You may apply them with different animations, separately. All the animation effects use Animate.css library effects. Also note that this plugin works only on text that contain elements, so any element that is not text will not be animated.

Now, we want to animate a simple text, like so:

<div class="tlt">
    <p>Each letter will animate.</p>
</div>

We then call the class name in our JS.

<script>
$(function () {
    $('.tlt').textillate();
})
</script>

The above code will apply only default animation setting to the text. To change the defaults, you can either use the html data api:

<div class="tlt" data-in-effect="rollIn">
    <p>Each letter will animate.</p>
</div>

or pass in options on initialization:

$('.tlt').textillate({ in: { effect: 'rollIn' } });

data-in-effect defines the entrance effect of the text. While for the exit effect, you can use data-out-effect api.

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. And for more enhancements, you can combine Textillate.js with another plugin like FitText.js for gigantic display text.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz