How to implement animated appearance of text by letter?

Question

css

Good day.

On the site: https://greenthumb.themerex.net/ there is a slider on top, the text appears on it letter by letter.

How can such an effect be realized? In this example, each letter is broken into its own container and appears separately. Perhaps there are similar examples for "parsing".

Answer 1

There was a solution in pure JS and CSS.
JS

function animateWord(word){
    let text = word.dataset.text;
    text.split('').forEach((letter,ind) => {
    let div = document.createElement('div');
    div.innerText = letter;
    setTimeout(()=> word.append(div),ind*200);
  })
}

const word = document.querySelector('.word');
animateWord(word);

css

@keyframes letter{
  0% {opacity: 0; transform: translateY(-15px)}
  100% {opacity: 1; transform: translateY(0px)}
}

.word div {
  animation: letter 0.5s;  
  display: inline-block;
}

HTML , the text in the "data-text" attribute. Let the example on the site look a little different and the text is not in the attribute of the HTML tag, but you can style it for yourself.
<div class="word" data-text='Hello'></div>