Easily Animate Text With Textillate.js

By . in Web Design. Updated on .

In our previous post, we have introduce you to Animate.css, an awesome CSS3 library, that makes CSS3 animation creation easier. In this post we are going to introduce you to a jQuery plugin, built using Animate.css, which is able to animate text, called Textillate.js.

Although you can animate text with Animate.css, it’s only animated wholly, not letter by letter. Even if you may have an approach of wrapping each character to an element and animating them, it’s going to be troublesome and not effective. With this plugin, you can animate every single letter of your text easily.

Textillate.js divides the animation into 2 components, in and out animation. You may apply them with different animations, separately. All the animation effects use Animate.css library effects.

Besides Animate.css, Textillate.js is also built based on Lettering.js. We can say, this plugin is the combination of these 2 powerful tools. Animate.css works on the animation feature, while Lettering.js focuses on the typography.

Usage

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 don’t forget to put the Animate.css library in the head section.

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

Basic Markup

To start using Textillate.js, you must define a class of element you want to animate, then add your chosen effect into it. Please note that this plugin works only on text that contain elements, so any element that is not text will not be animated.

As an example, we have an element which contains text here, and a demo class, like so.

<div class="demo">
    <p>Each of this letter will animate.</p>
</div>

We call the class name with Textillate.js initialization, like so.

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

The text will now animate.

Textillate.js Options

The previous Javascript code will apply only default animation setting to the text. To change it, there are two methods you can use.

1. First, by inputting HTML data api like the following.

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

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

2. You can also add the options into the Javascript Textillate.js initialization like the following code.

<script>
$(function () {
    $('.demo').textillate({
        in: {
            effect: 'rollIn'
        }
    });
})
</script>

In addition to effect, there are other useful options you may want to use. To see the full list of other options, head over to the documentation page.

Final Thought

Textillate.js is a very useful plugin especially when you want to attract users to the text you want to highlight the most. It can be your site heading, services, updates, promotion or anything else. And for more enhancements, you can combine Textillate.js with another plugin like FitText.js designated for gigantic display text. Once again, remember to use the animation in the right amounts.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail