Typing Animation

HTML

You can edit the text but don't change any of the text in < brackets >. You can also duplicate the <b> lines to add more animated lines. Copy the last line (<b>letters</b>) and create paste it on the next line in the same position.

<section class="sp-intro">
    <h4 class="sp-headline letters type">
        <span>Simple demonstration</span>
        <span class="sp-words-wrapper">
            <b class="is-visible">text</b>
            <b>words</b>
            <b>letters</b>
        </span>
    </h4>
</section>

CSS

/* TYPING ANIMATION CSS */

.sp-intro {
width: 90%;
max-width: 90%;
text-align: center;
margin: 0 auto;
}
.sp-intro, .sp-words-wrapper {
h4, b, i, p, span {
line-height: 56px;
font-size: 44px;
font-weight: 400;
color: #111111;
font-style: initial;
}
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
}
.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.sp-words-wrapper b.is-visible {
position: relative;
}
.no-js .sp-words-wrapper b {
opacity: 0;
}
.no-js .sp-words-wrapper b.is-visible {
opacity: 1;
}

.sp-headline.type .sp-words-wrapper {
vertical-align: top;
overflow: hidden;
}
.sp-headline.type .sp-words-wrapper.waiting::after {
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 100%;
width: 1px;
background-color: #111;
-webkit-animation: sp-pulse 1s infinite;
-moz-animation: sp-pulse 1s infinite;
animation: sp-pulse 1s infinite;
}
.sp-headline.type .sp-words-wrapper.selected {
background-color: #ccc;
}
.sp-headline.type .sp-words-wrapper.selected::after {
visibility: hidden;
}
.sp-headline.type .sp-words-wrapper.selected b {
color: #0d0d0d;
}
.sp-headline.type b {
visibility: hidden;
}
.sp-headline.type b.is-visible {
visibility: visible;
}
.sp-headline.type i {
position: absolute;
visibility: hidden;
}
.sp-headline.type i.in {
position: relative;
visibility: visible;
}

@-webkit-keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1) !important;
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9) !important;
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0) !important;
opacity: 0;
}
}
@-moz-keyframes sp-pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
// TABLET STYLES
@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro, .sp-words-wrapper {
h4, b, i, p, span {
line-height: 46px !important;
font-size: 38px !important;
font-weight: 400 !important;
}
}
}
// MOBILE STYLES
@media (max-width : 667px) {
.sp-intro, .sp-words-wrapper {
h4, b, i, span, p {
line-height: 36px !important;
font-size: 28px !important;
font-weight: 400 !important;
}
}
}
/* END OF TYPING ANIMATION */

JS - Page Header Code Injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){

var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, 
lettersDelay = 50,
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
revealDuration = 600,
revealAnimationDelay = 1500;

initHeadline();


function initHeadline() {

singleLetters($('.sp-headline.letters').find('b'));
animateHeadline($('.sp-headline'));
}

function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}

function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function(){
var headline = $(this);

if(headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
} else if (headline.hasClass('clip')){
var spanWrapper = headline.find('.sp-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type') ) {

var words = headline.find('.sp-words-wrapper b'),
width = 0;
words.each(function(){
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.sp-words-wrapper').css('width', width);
};

setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
});
}

function hideWord($word) {
var nextWord = takeNext($word);

if($word.parents('.sp-headline').hasClass('type')) {
var parentSpan = $word.parent('.sp-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function(){ 
parentSpan.removeClass('selected'); 
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);

} else if($word.parents('.sp-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
switchWord($word, nextWord);
showWord(nextWord);
});

} else if ($word.parents('.sp-headline').hasClass('loading-bar')){
$word.parents('.sp-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);

} else {
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
}

function showWord($word, $duration) {
if($word.parents('.sp-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
});
}
}

function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');

if(!$letter.is(':last-child')) {
 setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else if($bool) { 
 setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
}

if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
} 
}

function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');

if(!$letter.is(':last-child')) { 
setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
} else { 
if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
}
}

function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}

function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}

function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});
</script>