Как удалить строку по символам (эффект печатающей машины)?

Question

[AAGora]

Изучаю JS. Решил научиться создавать эффект печатающей машины. Логика следующая:
1) Берем строку.
2) Выводим каждый символ строки с определенным интервалом - создаем эффект печати.
3) Пауза.
4) Удаляем посимвольно строку - создаем эффект удаления.

Если брать каждый пункт отдельно, то понимаю, как это все реализуется, но никак не могу это все едино связать в конструкцию.

Ссылка: https://codepen.io/AAGora/pen/zYKerrY

Дублирую код:

let text = document.querySelector('.text');
let letters = text.textContent.split('');
let result = '';
let cur = '';
let step = 0;

//Выводим слово - начало
function outputsText() {
  result += letters[step];
  text.textContent = result;
  step++;
  if (step == letters.length) clearInterval(first);
}

let first = setInterval(outputsText, 300);
//Выводим слово - конец

//Удаляем слово - начало
function deletesText() {
  result = letters;
  result.pop();
  result = result.join('');
  text.textContent = result;
}

Answer 1

[Сергей Соколов]

Одной функцией можно выводить часть слова, определяемую длиной. Которая меняется то в одну, то в другую сторону:

Comments

[AAGora]

Отличное решение, Сергей. Спасибо большое. Очень нравится эргономичность кода, если так можно сказать. Вы профессионал!

Answer 2

[Алексей]

https://css-tricks.com/snippets/css/typewriter-effect/

https://www.w3schools.com/howto/tryit.asp?filename...

Answer 3

[ksnk]

let control = document.querySelector('.text'), 
        txt= control.textContent, 
        track=[];
    function runit(){
        let c= track.shift();
        if(!c) return ;
        if(c[0]==='pause'){
            setTimeout(runit,c[1]);
        } else if(c[0]==='substr') {
            control.textContent = txt.substr(c[1], c[2]);
            setTimeout(runit, 300);
        }
    }
    // программируем поведение
    for( let i=1;i<=txt.length;i++){
        track.push(['substr',0,i]);
    }
    track.push(['pause',3000]);
    for( let i=txt.length;i>=0;i--){
        track.push(['substr',0,i]);
    }
    runit();

Не оно ?