Animated Text Using Textillate js

Posted By : Gaurav Arora | 29-Sep-2015

In this blog, I'm going to show that how to animate text using Textillate.js.

First we have to include our js files.

    $(document).ready(function(){
    $('p')
      .fitText(1, { maxFontSize: 50 })
      .textillate({ initialDelay: 50, in: { delay: 20, shuffle: true } });
    });
    // maxFontSize defines the value that to which size the text extends.
    // initialDelay defines the amount in delay in which the text drops from top to bottom
    // delay defines the amount of delay in animating the text.

Here comes the css part.

p{text-align: center; /*any alignment*/
    visibility: hidden; /*just to hide the text so that it didn't show by default*/
}
.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
            visibility: visible;
}
@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
	}
	80% {
		-webkit-transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
	60% {
		opacity: 1;
		-moz-transform: translateY(30px);
	}
	80% {
		-moz-transform: translateY(-10px);
	}
	100% {
		-moz-transform: translateY(0);
	}
}
@-o-keyframes bounceInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		-o-transform: translateY(30px);
	}
	80% {
		-o-transform: translateY(-10px);
	}
	100% {
		-o-transform: translateY(0);
	}
}
@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}	
	60% {
		opacity: 1;
		transform: translateY(30px);
	}
	80% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}

After that add the type of effect to your content like I'm using bounceInDown here, but you can add different one's just by adding animate.css to page.

Animated Text with Bounce In Down Effect.

THANKS