Анимация текста, плавное появление букв

Вы такого хотели?

let text = 'upcoming collection...'

for (let i in [...text]) {
  let letter = document.createElement('span')
  letter.textContent = [...text][i]
  if(letter.textContent.match(/\s/)) {
    letter.style.margin = 'auto 3px'
  }
  letter.style.animationDelay = i/10+'s'
  content.appendChild(letter)
}

* {
  font-family: 'Segoe UI';
}

#content {
  display: flex;
}

span {
  text-transform: uppercase;
  font-weight: 500;
  animation: .3s 0s 1 text normal both running linear;
  display: block;
}

@keyframes text {
  0% {
    transform: translateY(-40px) rotate(45deg);
    opacity: .5;
  }
}

<div id="content">
</div>

Объяснение

1. Нельзя просто взять и написать document.querySelector('div с текстом'), нужно использовать textContent (или innerText, но лучше textContent), чтобы получилось примерно так: document.querySelector('Какой-то селектор').textContent

2. [...text] - это spread syntax, для "выворачивания" данных, в данном случае это текст, мы "выворачиваем" текст (...text), тоесть получаем каждую букву отдельно (Пример ...'hello' -> h e l l o), а дальше это всё мы получаем в массиве т.к. всё завёртнуто в квадратные скобки.

Полное объяснение кода:

Сначала берём текст (строку), далее в цикле for...in, на каждой итерации получаем индекс текущего элемента массива. Создаём новый элемент <span>, в текст ему записываем текущую букву обращаясь к [...text] и если текущий символ это пробел, тогда добавляем ему в стили margin: auto 3px, далее в стилях также указываем задержку для анимации чтобы буквы воявлялись постепенно, сначала берём текущий индекс и делим его 10, чтобы задержка была не слишком долгая, и в самом конце просто обращаемся к content, к слову, необязательно записывать в отдельную переменную элемент у которого есть id, можно просто написать его id чтобы сразу к нему обратиться, и конечно же в content добавляем текущий элемент. (Через девтул (инструменты разработчика) вы можете конкретно увидеть результат в HTML)