如何修复文字动画结束后的跳跃偏移问题？

当前文字切换动画结束后，新文字会出现明显的位置跳跃偏移，大字号或特殊字体场景下这个问题会更突出。

问题根源 #

1. SplitType拆分字符后，split.revert()还原DOM结构时会触发布局重排，导致视觉跳动
2. 文字切换前后的高度差异未被处理，容器高度变化引发偏移
3. setInterval的时序控制不够精准，容易出现动画叠加或DOM操作冲突

修复方案 #

1. 调整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;
      line-height: 1; /* 固定行高避免高度变化 */
    }
  }
  
.mask {
  overflow: hidden;
  height: fit-content;
  display: inline-block; /* 让容器自适应文字高度并固定 */
}

.layout-ws {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(16px, 5%, 30px);
}

2. 优化JS动画逻辑

改用GSAP的时序控制替代定时器，调整SplitType的使用时机并增加布局缓冲：

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 splitInstance = null
  const textElement = document.querySelector('.primary-h1 span')
  const maskElement = document.querySelector('.primary-h1')

  // 初始化固定容器高度
  gsap.set(maskElement, { height: maskElement.offsetHeight })

  function updateText() {
    // 先清除上一次的拆分实例
    if (splitInstance) {
      splitInstance.revert()
    }
    // 更新文字内容
    textElement.textContent = words[currentIndex]
    // 拆分单个字符（替代lines，动画更精准）
    splitInstance = new SplitType(textElement, { type: 'chars' })
    // 执行字符动画
    animateChars(splitInstance.chars)
    // 更新索引
    currentIndex = (currentIndex + 1) % words.length
  }

  function animateChars(chars) {
    // 提前将字符设置到动画起始位置
    gsap.set(chars, { yPercent: 100, rotate: 10 })
    // 执行入场动画
    gsap.to(chars, {
      yPercent: 0,
      rotate: 0,
      stagger: 0.03,
      duration: 1,
      ease: 'power4.out',
      onComplete: () => {
        // 延迟0.1秒再还原DOM，给浏览器重排留缓冲时间
        gsap.delayedCall(0.1, () => {
          if (splitInstance) {
            splitInstance.revert()
            // 还原后重新适配容器高度，应对不同文字的高度差异
            gsap.set(maskElement, { height: maskElement.offsetHeight })
          }
        })
      }
    })
    // 调度下一次文字切换
    gsap.delayedCall(3000, updateText)
  }

  // 启动首次动画
  updateText()
}

document.addEventListener('DOMContentLoaded', animateWords)

3. 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>

关键修改点说明 #

• 固定容器高度，避免文字切换时的布局波动
• 改用字符拆分替代行拆分，动画控制更精准
• 动画前初始化字符状态，避免起始位置混乱
• 延迟还原DOM结构，减少重排带来的视觉跳动
• 用GSAP的延迟调用替代定时器，避免时序冲突

内容的提问来源于stack exchange，提问作者SZENTIOSZ the SZAMOSZ