Textillate Base

by jschr

HTML

<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>
<h1 class="tlt">Some Title</h1>

CSS

@-webkit-keyframes noneOut { 100% {opacity: 1;}	}
@-moz-keyframes noneOut { 100% {opacity: 1;} }
@-o-keyframes noneOut { 100% {opacity: 1;} }
@keyframes noneOut { 100% {opacity: 1;}	}

.noneOut {
	-webkit-animation-name: noneOut;
	   -moz-animation-name: noneOut;
	     -o-animation-name: noneOut;
	        animation-name: noneOut;
}

.animated.noneOut {
    -webkit-animation-duration: 0.01s;
	   -moz-animation-duration: 0.01s;
	     -o-animation-duration: 0.01s;
	        animation-duration: 0.01s;
}

JavaScript

$('.tlt').textillate({ 
    in: { effect: 'flip' },
    out: { effect: 'noneOut', sync: true }, 
    loop: true 
});