Чередуйте слова с эффектом пишущей машинки в JavaScript

var i = 0;
var j = 0;
var x = 0;
var txt = "To me, you are extremely ";
var array = ["cool", "pretty", "smart", "beautiful", "gorgeous"];
var speed = 50;
const demo = document.querySelector('#demo');

document.getElementById("btn").onclick = function () {
  if (demo.innerHTML){
    demo.innerHTML = '';
  }
  typeWriter();
};

function typeWriter() {
  if (i < txt.length) {
    demo.innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    if (j != array.length){
        if (x >= array[j].length){
            demo.innerHTML = demo.innerHTML.replace(array[j], '');
            j++
            x = 0;
            setTimeout(typeWriter, speed);
        } else {
            demo.innerHTML += array[j].charAt(x);
            x++
            setTimeout(typeWriter, speed);
        }
    } else {
        j = 0;
        i = 0;
    }
  }
}

<button id = "btn">click</button>
<div id = "demo"></div>

function animateText(el, txtArr, delay) {
    let i = 0,
        currentTxt = 0,
        reverse = false;
    const oneFrame = () => {
        requestAnimationFrame(() => {
            if (!reverse){
                el.textContent += txtArr[currentTxt][i];
                i++;
                if (i == txtArr[currentTxt].length){
                    reverse = true
                }
            } else {
                el.textContent = txtArr[currentTxt].substring(0, i);
                i--;
                if (i < 0){
                    i = 0;
                    reverse = false
                    currentTxt = (currentTxt < txtArr.length -1) ? currentTxt+=1 : 0;
                }
            }
        });
        setTimeout(oneFrame, delay);
    };
    setTimeout(oneFrame, delay);
}

document.querySelector('#btn').addEventListener('click', ()=> {
  animateText(document.querySelector('#demo'), ["cool", "pretty", "smart", "beautiful", "gorgeous"], 100);
});

<button id = "btn">click</button>
<div><span>To me, you are extremely </span><span id = "demo"></span></div>

var i = 0;
var j = 0;
const ROOT_TEXT = "To me, you are extremely";
var txt = "To me, you are extremely cool";
var array = [" pretty", " smart", " beautiful", " gorgeous", " cool"];
var speed = 50;

document.getElementById("btn").onclick = function () {
  typeWriter();
  setInterval(rotate, 5000);
};

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

function rotate() {
  let demo = document.getElementById("demo");
  demo.innerHTML = ROOT_TEXT;
  i = ROOT_TEXT.length;
  txt = ROOT_TEXT + array[j];
  typeWriter();
  j = (j + 1) % array.length;
}

<div id = "demo"></div>
<button id = "btn">clicky</button>

function sleep(ms) {
  return new Promise(r => setTimeout(r, ms));
}

async function typewrite(txt, el) {
  el.innerText = "";
  for (const char of txt) {
    el.textContent += char;
    await sleep(75);
  }
}

async function main() {
  const TAILS = ["pretty", "smart", "beautiful", "gorgeous", "cool"];
  const ROOT_TEXT = "I think you are ";
  const root = document.querySelector(".root");
  const tail = document.querySelector(".tail");
  await typewrite(ROOT_TEXT, root);
  let tailIndex = 0;
  while (true) {
    await typewrite(TAILS[tailIndex], tail);
    await sleep(3000);
    tailIndex = (tailIndex + 1) % TAILS.length;
  }
}

main();

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.display {
  box-shadow: 0 0 2px 2px pink;
  padding: 1rem;
  border-radius: 5px;
}

<div class = "display">
  <span class = "root"></span>
  <span class = "tail"></span>
</div>