Typewriter Effect

<style>
#heading-JkcgZmWRdVW h1 u { text-decoration: none !important; }
</style>

<script>

elementType = "h1 strong u";
phrases = "Highlevel|Code Resources|Highlevel Marketplace Partners|Highlevel News";

typeSpeed         = 50;
unTypeSpeed       = 30;
startWait         = 2000;
phraseDisplayWait = 2000;
typingWait        = 700;

/* do not edit! */
dynoType = null;
currentText = '';
whichPhrase = 0;
phrasesArray = phrases.split('|');
classArray = elementType.split(',');

/* start! */
for(var i = 0; i < classArray.length; i++){
	classArray[i] = '.dynamic-text ' + classArray[i];
}
wait4TypeEl = setInterval(function(){
	typeEl = document.querySelector(classArray[0]);
	if(typeEl){
		clearInterval(wait4TypeEl);
		setTimeout(function(){
		
		},startWait/2);
		setTimeout(unTypePhrase,startWait);
	}
});
function typePhrase(){
	currentPhrase = phrasesArray[whichPhrase];
	for(var i = 0; i < classArray.length; i++){
		document.querySelector(classArray[i]).innerHTML = '';
	}
	typing = setInterval(function(){
		if(currentPhrase.length){
			snippet = currentPhrase.slice(0,1);
			currentPhrase = currentPhrase.substring(1);
			for(var i = 0; i < classArray.length; i++){
				document.querySelector(classArray[i]).innerHTML += snippet;
			}
		} else {
			clearInterval(typing);
			setTimeout(unTypePhrase,phraseDisplayWait);
		}
	},typeSpeed);
}
function unTypePhrase(){
	currentPhrase = document.querySelector(classArray[0]).innerHTML;
	typing = setInterval(function(){
		if(currentPhrase.length){
			currentPhrase = currentPhrase.substring(0,currentPhrase.length-1);
			for(var i = 0; i < classArray.length; i++){
				document.querySelector(classArray[i]).innerHTML = currentPhrase;
			}
		} else {
			clearInterval(typing);
			for(var i = 0; i < classArray.length; i++){
				document.querySelector(classArray[i]).innerHTML = '';
			}
			whichPhrase++;
			whichPhrase = (whichPhrase >= phrasesArray.length)? 0 : whichPhrase;
			setTimeout(typePhrase,typingWait);
		}
	},unTypeSpeed);
}
</script>

Create Headline

1. Create Headline element on Funnel

2. Enter any text to your Headline element

3. Bold the text you want to have the typewriter effect on.

Add Code

1. Create a Custom JavaScript/CSS element on the funnel page under the Headline

2. Paste code into the block

Update Code

1. Update Phrases Section: "phrases = Highlevel|Code Resources|Highlevel Marketplace Partners|Highlevel News

2. Update Heading CSS Selector

   1. Click on Headline

   2. Go to Advanced

   3. Scroll down and copy the text in "CSS Selector"

      1. Example: #heading-JkcgZmWRdVW

   4. Replace text on line 2 of code