TypeIt - универсальный инструмент JavaScript для создания эффектов пишущей машинки (эффект набора в терминале). Благодаря простой конфигурации, он позволяет вводить одну или несколько строк, которые разрывают другие строки, удаляют и заменяют друг друга, и даже обрабатывает строки, содержащие сложный HTML. Есть поддержка ввода в HTML формах.

Документация здесь

Репозиторий здесь

1. Качаем библиотеку .

2. Подключаем библиотеку в проект:

<script src="typeit.min.js"></script>

3. Создаём текстовый блок, к которому применим нужную анимацию:

<div id="element"></div>

4. Скрипт:

new TypeIt('#element', {
  strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!"
}).go();

// Или так
let myTypeItInstance = new TypeIt("#element", {
strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!"
});

myTypeItInstance.go();

Вы можете определить строки для ввода разными способами.

Вариант #1: Определить их в своих параметрах как строку или массив строк.

new TypeIt("#element", {
  strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!"
}).go();

//Массив строк
new TypeIt("#element", {
  strings: ["This will be typed!", "And this will be typed too."]
}).go();

Вариант #2: Жестко прописать в целевом элементе. Это хороший вариант для SEO. 

<span id="element">This will be typed!", "And this will be typed too.</span>

new TypeIt("#element").go();

Вариант #3: Определить их с помощью методов экземпляра. Чтобы определить свои строки вручную, используйте метод экземпляра type() и настройте эффект еще больше, комбинируя их с другими методами.

new TypeIt("#element")
  .type("TypeIt is the most versatile JavaScript typewriter effect utility on the planet!")
  .pause(1000)
  .type("Plus a little more.")
  .go();
<!DOCTYPE html>
<html>
<head>
  <title>typeitjs</title>
</head>
<body>
  <p id="element"></p>	
  <script src="typeit.min.js"></script>
  <script>
    new TypeIt("#sample_typeit", {
      strings: [
      "TypeIt - универсальный инструмент JavaScript для создания эффектов пишущей машинки (эффект набора в терминале).",
      "Благодаря простой конфигурации, он позволяет вводить одну или несколько строк, которые разрывают другие строки, удаляют и заменяют друг друга, и даже обрабатывает строки, содержащие сложный HTML. Есть поддержка ввода в HTML формах."
      ],
      speed: 50,
    }).go();
  </script>
</body>
</html>