Попытка получить l oop через текстовые элементы и один за другим анимировать

Question

Пытаюсь что-то построить и задаюсь вопросом, правильно ли я подхожу к этому.

Я видел эффект, при котором текст будет выглядеть обрезанным и скользить вверх по строкам, одна за другой.

Я построил его таким образом, по сути, перебирая каждый текстовый элемент в цикле и добавляя класс, который перемещает его в представление (я использую отсечение и перевод). Чтобы контролировать задержку на каждом l oop через, я каждый раз увеличиваю переменную. Мой CSS кажется немного грязным

Здесь код: https://codepen.io/shane-harley/pen/bGEBmGQ

Мысли?

let transitionTime = 0
    text.forEach(heading => {
      window.addEventListener('load', () => {
            heading.classList.add("active")
            heading.style.transitionDelay = transitionTime + "s"
            transitionTime = transitionTime + .2
        })
    })