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.
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.
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
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.
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.