<style>
    /*В эту строку через запятую нужно написать классы текста*/
    /*.reveal-text_1, .reveal-text_2 и т.д*/
    .reveal-text_1 {overflow: hidden;} 
    .reveal-symb {display: inline-block;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script>
let tl = new TimelineMax();
document.addEventListener("DOMContentLoaded",function(){
    function splitText(el) {let elem;let textContainer; if (!document.querySelectorAll(el)) {console.log('Такого элемента не существует на странцие')} if (document.querySelectorAll(el).length < 1) {elem = document.querySelectorAll(el);elem.forEach((itm) => {textContainer = itm.querySelector('div');textContainer.innerHTML = '<span class="reveal-symb">' + itm.textContent.trim().split('').join('</span><span class="reveal-symb">') + '</span>';});} else {elem = document.querySelector(el);textContainer = elem.querySelector('div');textContainer.innerHTML = '<span class="reveal-symb">' + elem.textContent.trim().split('').join('</span><span class="reveal-symb">') + '</span>';}}
    
    // Если анимации на экране несколько, то нужно скопировать эту строку,
    // вставить ее ниже и заменить класс текста
    splitText('.reveal-text_1');
    
    tl
    // В этой строке 0.6 - длительность анимации появления буквы, delay: 0 - задержка появления,
    // 0.1 - задержка между появлением следующей буквы
    // Для создания второй анимации нужно скопировать строку ниже, вставить ее ниже первой, заменить
    // цифру в классе, установить значения длительности и задержку появления, если нужно
    // Нужно обязательно убрать в конце первой строки ;
        .staggerFromTo('.reveal-text_1 span', 0.6, {yPercent: 100}, {yPercent: 0, delay: 0}, 0.1);
    tl.pause();
});

window.addEventListener("load", function() {
    // Анимация срабатывает после загрузки всей страницы. Если нужно запустить ее чуть позже
    // Или, если на странице есть прелоадер - замени 1000 на свое число. Время в миллисекундах
    const time = 1000;
    setTimeout(() => {tl.play()}, time);
});
</script>