textillate.js: Create stunning CSS3 text animation

Textillate.js is an amazing jQuery plugin that creates stunning CSS3 text animation. 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.

And don’t forget to put the Animate.css library in the head section.

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.

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

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.

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.

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.

Leave a Comment

Your email address will not be published. Required fields are marked *