Как собрать слово из букв?

Question

[Ingernirated]

Всем привет!
Нужно сделать слово, которое собирается из букв.
Т.е. влетает одна, за ней вторая и так всё слово.
Сделать Анимация и появление одной не трудно, но остальные, если изменять innerHTML просто рядом с ней появляются, а не долетают с боку.
Как к новым буквам добавить анимацию?

Answer 1

[0xD34F]

<div id="container"></div>

const text = 'Hello, world!!';
const container = document.querySelector('#container');

[...text].forEach((n, i) => {
  setTimeout(() => {
    container.insertAdjacentHTML('beforeend', `<span>${n}</span>`);
  }, 300 * i);
});

span {
  display: inline-block;
  animation: span .2s ease-out;
  font-size: 40px;
}
@keyframes span {
  from {
    transform: translateX(500px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Comments

[Ingernirated]

спасибо

[Bhudh]

Вот так всегда. Благодарят не того, кто дал удочку, а того, кто дал рыбу.

Answer 2

[Bhudh]

Изменять HTML не по буквам, а по элементам, содержащим букву.
У элементов есть свойства позиции, а у куска текста их нет.