textillate.js

step one

step two

Add this to the <head> section of your html

<link href="link/to/animate.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script src="link/to/jquery.textillate.js"> </script>
<script src="link/to/jquery.lettering.js"> </script>

And JavaScript should look like this

$(function () {
$('.text').textillate();
})

step three

Add this class to the text you want to animate

<h1 class="tlt">Awesome Title</h1>

Alternate Step three

Put your title and subtitle in a list to animate in and out seperately (this makes it so only one list item shows at a time).

<ul class="tlt">
<li>Awesome Title that disappears</li>
<li>this subtitle will stay on your screen</li>
</ul>

step four

Specify your effect for title and subtitle (If you're animating an <ul> you can specifiy the out animation by adding "data-out-effect= 'bounceOut'").

<h1 class="tlt" data-in-effect= "rollIn" >Awesome Title</h1>
<h2 class="tlt" data-in-effect= "bounceIn" >Subtitle to further explain awesomeness of title</h2>

step five

add delay to <head> section so subtitle animates in after title

<script>
$(function () {
('#one h2')
.textillate({ initialDelay: 2200 });
</script>
})

built on these libraries

JQuery
lettering.js by Dave Rupert
animate.css by Daniel Eden
Original Textillate Demo

This site was developed for educational purposes only. Some images and content may have been appropriated for the learning process without permission under fair use of US Copyright Law. Section 107, Title 17.