Как исправить этот эффект прыжка после текстовой анимации?

В данном примере скачок кажется небольшим; однако в моем проекте с большими размерами шрифтов и разными шрифтами эта проблема становится более явной. После завершения анимации и появления нового текста текст подпрыгивает, как будто возвращается в исходное положение. Для него я также создал проект Codepen.

Яваскирпт

import SplitType from "https://cdn.skypack.dev/[email protected]";
import gsap from "https://cdn.skypack.dev/[email protected]";

function animateWords() {

  const words = ["word1","word2","word3"]

  let currentIndex = 0
  let split
  const textElement = document.querySelector('.primary-h1 span')

  function updateText() {
    textElement.textContent = words[currentIndex]
    split = new SplitType(textElement, {type: 'lines' })
    animateChars(split.chars)
    currentIndex = (currentIndex + 1) % words.length
  }

  function animateChars(chars) {
    gsap.from(chars, {
      yPercent: 100,
      stagger: 0.03,
      duration: 1,
      ease: 'power4.out',
      rotate:10,
      onComplete: () => {
        if (split) {
          split.revert();
        }
      }
    })
  }

  setInterval(updateText, 3000)

}
document.addEventListener('DOMContentLoaded', () => {

    

  animateWords()
  
  
})

HTML

<main class = "hero">
      <div class = "left layout-ws">
        <h1>
          <div class = "mask primary-h1">
            <span>word</span>
          </div>
          <div class = "mask">
            <span>randomtext</span>
          </div>
        </h1>
      </div>
</main>

CSS

main {

  .left {
    align-self:last baseline;
    flex: 1;
    height: 90vh;
    display: flex;

    h1 {
      font-size: clamp(10rem, 17vw, 10rem);
      align-self:last baseline;
      font-weight: 100;
      margin: 0;
    }
  }
  
.mask {
  overflow: hidden;
}

.layout-ws {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(16px, 5%, 30px); /* Adjust for fluid side margins */

}