Typing Animated Text

Site URL: https://kccbd.net

Hey there! I had just attempted to apply a piece of code so that a header of my website will have an animation where it will type a word, highlight, delete, and type another word as a way to draw the viewers eye and emphasize the purpose of our company... if that makes any sense?

For example:

We are a team of makers.

We are a team of designers.

We are a team of creativists.

(The word would change as if someone were typing it)

The following code is what I used, however, the animation seems to not be functioning for some reason. I was wondering if anyone would be able to find an issue within the coding itself that is halting the problem. Thank you!

<style>
.sp-intro {
text-align: left;
}
.sp-headline {
  margin: 0 !important;
}
.sp-intro i, .sp-intro b {
  font-weight: inherit !important;
  font-style: inherit !important;
}
.sp-intro {
line-height: ;
font-size: ;
color: ;
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
width: auto !important;
}
.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;
}
}


@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}

@media (max-width : 667px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}
</style>
<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 = 100,
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>

Which page where you added the code?

The code is located on the home page. As of now, only the word "make" has the animation applied, but the others don't seem to work. The goal is make some text permanent on the page which includes "Hemp-Infused Products That" and the animated elements following it. 

For example:

Hemp-Infused Products That Make A Difference 

Hemp-Infused Products That Heal The Soul

etc. etc.

The link to the website is here: https://kccbd.net

Thank you!