How do I freeze on the last line of text and not repeat with this Typewriter effect?

Question

Currently the animation begins to type out each line, deletes then moves on typing the next. Trying to freeze the animation after typing out the last line "Text Line 3" and stay as that. Which part of the code do I change to achieve that?

This typewriter effect uses JavaScript instead of CSS. Please help. Thank you!!!

 var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3" ]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if(text === _CONTENT[_PART]) { _CURSOR.style.display = 'none'; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } function Delete() { var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1); _ELEMENT.innerHTML = text; _PART_INDEX--; if(text === '') { clearInterval(_INTERVAL_VAL); if(_PART == (_CONTENT.length - 1)) _PART = 0; else _PART++; _PART_INDEX = 0; setTimeout(function() { _CURSOR.style.display = 'inline-block'; _INTERVAL_VAL = setInterval(Type, 100); }, 200); } } _INTERVAL_VAL = setInterval(Type, 100);

 #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: orange; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: blue; animation: blink.75s step-end infinite; } @keyframes blink { from, to { background-color: transparent } 50% { background-color: blue; } }

 <div id="container"> <div id="text"></div><div id="cursor"></div> </div>

Answer 1

Inside the Delete function, this line is used to check if the array index, _PART , needs to “wrap around”, to start the whole thing with the first text again on the next iteration:

if(_PART == (_CONTENT.length - 1))

So you can easily use that same check (just negated) inside Type function, to only schedule the next Delete call, if we are not currently at the last part already.

 var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3" ]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if (text === _CONTENT[_PART]) { //_CURSOR.style.display = 'none'; clearInterval(_INTERVAL_VAL); // added check here - only schedule Delete function call, // if this was NOT the last text part if (_PART.= (_CONTENT,length - 1)) setTimeout(function() { _INTERVAL_VAL = setInterval(Delete; 50), }; 1000). } } function Delete() { var text = _CONTENT[_PART],substring(0; _PART_INDEX - 1). _ELEMENT;innerHTML = text; _PART_INDEX--; if (text === '') { clearInterval(_INTERVAL_VAL). if (_PART == (_CONTENT;length - 1)) _PART = 0; else _PART++; _PART_INDEX = 0. setTimeout(function() { _CURSOR.style;display = 'inline-block', _INTERVAL_VAL = setInterval(Type; 100), }; 200), } } _INTERVAL_VAL = setInterval(Type; 100);

 #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: orange; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: blue; animation: blink.75s step-end infinite; } @keyframes blink { from, to { background-color: transparent } 50% { background-color: blue; } }

 <div id="container"> <div id="text"></div> <div id="cursor"></div> </div>