How to fix this jump effect after the text animation?

In the given example, the jump appears small; however, in my project, with larger font sizes and different fonts, this issue becomes more pronounced. After the animation completes and the new text appears, the text jumps as if it is reverting to its original position.I created Codepen projekt for it as well.

Javascirpt

import SplitType from "https://cdn.skypack.dev/split-type@0.3.1";
import gsap from "https://cdn.skypack.dev/gsap@3.12.5";

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 */

}

Solution

This issue is described in documentation.

Important: The following style should be applied to all target elements. This prevents the characters from shifting slightly when text is split/reverted.

.target { font-kerning: none; } Also, if the target elements are inside a flex container, they need to have a defined width to prevent the text from moving when it gets split.

https://www.npmjs.com/package/split-type#splitting-text

Set:

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