Enhance Your Text Animations with Textillate.js

By . in Web Design. Updated on .

In our previous post, we introduced you to Animate.css, an awesome CSS3 library that simplifies CSS3 animation creation. Now, let’s explore a jQuery plugin, built using Animate.css, designed specifically for animating text: Textillate.js.

While Animate.css can animate text, it does so in its entirety, not letter by letter. Although wrapping each character to an element and animating them is a possibility, it can be troublesome and inefficient. Textillate.js simplifies this by allowing you to animate every single letter of your text effortlessly.

Textillate.js divides the animation into two components: in and out animation. You can apply different animations to each component separately. All the animation effects draw from the Animate.css library.

In addition to Animate.css, Textillate.js is also built on Lettering.js, making it a blend of two powerful tools. Animate.css handles the animation feature, while Lettering.js focuses on typography.

How to Use Textillate.js

Textillate.js requires a few dependencies before you can start using it: Animate.css, Lettering.js, and jQuery. Once you’ve downloaded these files, include them in your project as follows:

 <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 include the Animate.css library in the head section:

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

Basic Markup

To start using Textillate.js, you need to define the class of the element you want to animate and add your chosen effect to it. Note that this plugin works only on text-containing elements, so any element that is not text will not be animated.

For example, here’s an element containing text, with a demo class:

 <div class="demo">
	 <p>Each of these letters will animate.</p>
 </div>

We initialize the class name with Textillate.js as follows:

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

The text will now animate.

Textillate.js Options

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

1. By using an HTML data API, as shown below:

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

data-in-effect specifies the entrance effect for the text. For an exit effect, use the data-out-effect API.

2. By adding the options directly into the JavaScript Textillate.js initialization:

<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 options, visit the documentation page.

Final Thoughts

Textillate.js is a highly useful plugin, particularly when you want to draw attention to specific text on your website. This could include headings, services, updates, promotions, or anything else. For additional enhancements, you can combine Textillate.js with another plugin like FitText.js, which is designed for large display text. And remember, always use animations in moderation.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail