Нашлось решение на чистом JS и 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, текст в атрибуте "data-text".
<div class="word" data-text='Hello'></div>
Пусть на сайте примере и выглядит немного не так и текст не в атрибуте HTML тега, но можно стилизовать под себя.