There’s this animation where words are being swapped in a sentence. The animation works fine, successfully changing the word. However, after the animation completes, there’s always a little jump in the word, as if it snaps back to its original position. I’ve tried a few things but couldn’t figure out how to eliminate this.I tried changing the duration and the update text timing, but it didn’t work properly. Even when I changed the split type from ‘chars’ to ‘words’, the issue persisted.

The script

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: 'chars' })
    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)

}