Textillate.js – Create CSS3 Text Animation with JQuery Plugin

WoW..! CSS3 Animations are just beyond the word – Amazing, whether you are dealing with a particular text or any element, applying animations and transitions to these has been made simpler with a professional touch. There are so many useful and popular Javascript libraries like Textillate.js – a jquery plugin that has made animating texts or text, even more, easier and convenient.

Textillate.js is built using Animate.css & Lettering.js but with lot more advancement and features. In Animate.css you can give animation to either a single sentence or particular words but Textillate.js gives you the opportunity to give javascript text animation effects to each and every single letter.

Textillate.js

Here’s

How Textillate.js Works? Getting Started

First of all, textillate.js separates the CSS text animation into 2 parts, In and Out animation.

Means if you want to animate a sentence you can give two animation effects to the sentence, first how the animation starts and second how the animation end.

How to Use Textillate.js?

It is very easy to use Textillate.js let’s see how:

First of all, textillate.js is dependent on three more libraries: Animate.css, Lettering.js, and jQuery.

Just visit all the 3 projects, download each of them and host them on your server.

After hosting all the files add the scripts and CSS before the closing </head> tag in your web page.

Here’s how to include the scripts in your web page after hosting them on your server.

Now add the Animate.CSS file along with the scripts.

You can also use the CDN of the scripts in the <head> section to directly call the scripts from the remote server and don’t waste your space and bandwidth from your own servers.

JQuery CDN, Textillate.js CDN, and Animate.css CDN

Now you’re done with the integration of all the 3 dependencies of Textillate.js So, let’s get started guys and girls for integrating with it and start doing css3 magic animations.

Textillate.js Basic Markup

Step 1: If you want to apply textillate.js to any of your element then, first of all, you have to give a Class or ID to that particular element. here’s below:

Now just add the javascript syntax with the class and your element will be loaded with text animations, check below for more:

Note:

The text animation that will be applied to the element will be the default animation setting. If you want to apply your own text animations and want to change the defaults then there are two more ways:

1. Using HTML Data API

data-in-effect: Entry animation effect of the text

data-out-effect: Exit animation effect of the text

2. Add Javascript in the Initialization of the function

This will also output the same text animation effect as using HTML Data API.

Recommended Readings:

This is how you can give the Textillate.js effect to all your elements using the plugin but there are much more customizations you can do with Textillate.js, for more check out below textillate.js options:

Textillate.js Options

selector: default selector to use, in case you are selecting multiple texts to animate

loop: Want to enable looping, you can loop the animation effect. The default is false

minDisplayTime: This sets the minimum time in ms that the text is displayed

initialDelay: set your custom initial delay before starting the animation

autoStart: in case if you want or not to start your animation automatically

inEffects: Entry text animation effect

outEffects: Exit text animation effect

delayScale: apply the delay factor to each and every consecutive character

delay: delay between each character

reverse: reverse the character sequence (Note: reverse doesn’t make sense with sync = true)

sync: animate all the characters at the same time. Default is false

shuffle: randomize the character sequence. Default is set to false (Note: shuffle doesn’t make sense with sync = true)

Callback (textillate callback): this will execute once the animation has finished its job.

Applying more complex textillate.js options to the code, just check below code attentively:

If you want to check out the demo of the customized code, check out here.

The above code gives extra customization to Textillate.js animation effects. Similarly give a try to your own customization and see how everything works.

Check out the complete documentation of Textillate.js on the github and start using it on your websites and your client projects and impress them with simple and awesome javascript tricks to interact and style your content and web pages.

(Visited 321 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply