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.

By Sara Vieira
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.
  • Hey Sara,

    thank you, as always – great tutorial. I’ve recently started exploring more of this area, but still not feeling right about using it on my every day website projects.

    • Sara Vieira

      Glad you liked it,
      This is something that is great for some websites, not all but still a great plugin

  • Nice

  • Amanda Mays

    Hi,
    Perhaps you can help me. I downloaded all the files and put them onto my server with my word press blog, followed the instructions, and added an and multiple lists like it says in the instruction page. I added the files to the head section of my webpages including the animate.css, fittest.js, textilliate.js, lettering.js, and jquery.js. I cannot get it to work right.

    I went to JS Fiddle and put all my information on their website for the HTML, CSS, and JavaScript and I got it working on that site. But when I copy the exact same thing over into my own website, it doesn’t do the animation. Right now, I’m just trying to get the animation to fade in and out three different list items but all it does is show them all at once one.

    The code at JS Fiddle can be found here: http://js fiddle.net/amandamays/Rvu9N/69/

    Full screen result here: http://js fiddle.net/amandamays/Rvu9N/69/embedded/result/

    Any suggestions?

    Amanda Mays

  • alejandra

    Thank you. thank you very much … this was of real help

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns