How to create text animations with Textillate

Using CSS we can create all kinds of animations. Whether we’re working with text or with elements, animations and transitions are a much simpler task with CSS.

It’s all possible with vanilla CSS, but there are a number of plugins that make our life simpler, one of which we’re going to look at today: Textillate.js.

Getting started

In order to start using this plugin we need firstly to head over to its website and download the latest version.

One thing to keep in mind is that this plugin has 3 dependencies: jQuery, animate.css and lettering.js; so you need to also visit these websites and include these three plugins in your page before you include Textillate.

Animating our text

Now that we have all of that in our project we can actually start using Textillate and animate our text, and you’ll be surprised with how easy that is.

We’re going to start by creating a simple h1 and assigning a class to it:

<h1 class=“title”>My First Shake Example</h1>

After this is created we need to call the plugin on that class, and for now we won’t pass any arguments to it:

$(‘.title’).textillate();

Now that we have done this we have two options in order to start animating , we can pass the effects using the HTML data API and insert the name of the effect inside the h1 tag like so:

<h1 class=“title” data-in-effect="flash">My First Shake Example</h1>

If you wish to see a list of effects you can use just head over to the playground in the Textillate website and look around in both the dropdowns.

The other option we have is to pass in the option in the initialization of the function :

$('.title').textillate({
  in: { effect: ’tada' }
});

This has the exact same outcome as using the html data it’s simply a matter of preference which method you choose.

Passing more options

If all you need is a simple entrance text animation you have read enough, go force and make text animations…

But as you probably suspect, there is a lot more available.

First of all let’s make the animation loop forever and also add an out animation to our text:

$('.title').textillate({
  loop: true,
  in: { effect: 'tada' }, 
  out: { effect: 'flipOutY' }
});

As you can see all we really needed was to override the default when it comes to looping and then add an out effect to our text.

There are a couple more options we can pass if we choose to:

  • selector – This is where we choose the default selector to use.
  • loop – If we want to enable looping or not. The default is false.
  • minDisplayTime – Sets the minimum time in ms that the text is displayed.
  • initialDelay – In here you can set the initial delay before starting the animation.
  • autoStart – Select whether or not you wish the animation to start automatically.
  • inEffects, outEffects – Custom set of in and out effects.

These are the plugins options, the general options we have in this plugin and we haven’t started discussing the animation settings.

The animations settings are what define the in and out effect we use and how this effect will display on the page, they are specific to that animation.

The settings we have are.

  • effect – In here you write the name of the effect you want to use.
  • delayScale – In here you can set the delay factor that is applied to each character.
  • delay – Use this option to set the delay between each character.
  • sync – Select whether or not you wish all the characters to animate at the same time. Default is false.
  • shuffle – Default is false again and setting this to true will randomize the character sequence.
  • reverse – In here we can reverse the character sequence.
  • Callback – Finally we have the option to pass in a callback function that will execute when the animation has finished.

As you can see we have a tremendous amount of freedom when creating these animations and now we can make our animation a little more complex:

$('.title').textillate({
  loop: true,
  in: { 
    effect: 'tada',    
    delayScale: 1,
    delay: 150,
    shuffle: true
  }, 
  out: { 
    effect: 'flipOutY',
    reverse: true
  } 
});

As you can see I changed the animation a bit by adding some more settings to both the In and Out animation.

Conclusion

If you’d like to see a demo, you’ll find it here.

Animations using CSS have gotten great over the last couple of years and now with plugins like Textillate these tasks can be greatly simplified and are accessible to anyone.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress