How to get a full working typewriter effect including text disappearing

Question

I'm trying to make a typewriter effect, and got that working, but I'm really struggling to make the letters dissapear one for one again. This is the code that I'm using

 $(document).ready(function() { setTimeout(typeWriter, 500); }); var i = 0; var txt = 'My name is Bram Surname'; var speed = 50; let typewriterDone = false function typeWriter() { if (i < txt.length && typewriterDone == false) { document.getElementById("title").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); if (i == txt.length) { typewriterDone = true } } else { typewriterDone = true; // remove 1 letter like first one } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="title"></h1>

Answer 1

It sounds like you want to remove each letter again one by one, immediately after you've added them all? If so, then this will do it:

 $(document).ready(function() { setTimeout(typeWriter, 500); }); var i = 0; var txt = 'My name is Bram Surname'; var speed = 50; let direction = 1; function typeWriter() { var title = document.getElementById("title"); if (i < txt.length && direction == 1) { title.innerHTML += txt.charAt(i); i++; } else { if (i == txt.length) direction = 2; if (i != 0) { title.innerHTML = title.innerHTML.slice(0, -1); i--; } } setTimeout(typeWriter, speed); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="title"></h1>

Answer 2

Slight reworking of your approach:

 $(document).ready(function() { setTimeout(() => typeOn(document.getElementById("title"), 'My name is Bram Surname'), 500); }); const speed = 50; // convenience function for adding a character const addChar = (elem, char) => elem.innerHTML += char; // convenience function for removing a character const removeChar = elem => elem.innerText = elem.innerText.substr(1); // type on the given string function typeOn(elem, str) { const [first, ...remaining] = str; addChar(elem, first); if (remaining.length) { setTimeout(() => typeOn(elem, remaining), speed); } else { setTimeout(() => typeOff(elem), speed); } } // remove the string, one char at a time function typeOff(elem) { removeChar(elem); if (elem.innerText.length > 0) { setTimeout(() => typeOff(elem), speed); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="title"></h1>

Answer 3

I made a vanilla implementation at: https://codepen.io/zvona/pen/YzXLJGa (see also snippet below).

The thing is to split all the content into an array and then append them one by one with a timeout to the title. After the title length matches with the original content, it can be considered as completed and then start removing the text with same interval.

 const typewriter = (content, interval = 100) => { const title = document.querySelector("#title"); const splitContent = content.split(""); const handleContent = newContent => { if (newContent.length) { title.textContent += newContent; if (title.textContent === content) { window.setTimeout(handleContent, interval, ""); } } else { title.textContent = title.textContent.substr(1); if (title.textContent.length) { window.setTimeout(handleContent, interval, ""); } } }; splitContent.forEach((letter, i, arr) => { window.setTimeout(handleContent, i * interval, letter); }); }; typewriter("My name is Bram Surname");

 <h1 id='title'></h1>