使用 GSAP 实现类似打字机但更加丝滑的文字显示效果

#GSAP #Animation #typewriter

0x00 功能演示

我要实现的效果是文字逐字显示，通过滚动进行触发，支持中断、回退、继续。

话不多说，先看效果：

0x01 实现思路

  • 分割文字，以单个文字为单元执行动画
  • 通过 scrollTrigger.scrub 设置停顿、控制动画触发、结束位置
  • 初始状态将每个文字的 opacity 设置为 0
  • 通过控制 stagger 确保动画执行的顺序，设置成比 duration 小可以有更好的过渡效果
function splitText(text) {
  return text
    .split("")
    .map((char) => `<span class="text-animation">${char}</span>`)
    .join("");
}

const line1 = document.querySelector(".line-1");
const line2 = document.querySelector(".line-2");

line1.innerHTML = splitText(line1.innerText);
line2.innerHTML = splitText(line2.innerText);

gsap.from(".text-animation", {
  scrollTrigger: {
    trigger: ".animation-container",
    start: "top center",
    end: "bottom bottom",
    scrub: 1,
    toggleActions: "restart none none reverse"
  },
  opacity: 0,
  duration: 0.00001,
  stagger: 0.000001
});

0x02 相关资料

如果对 GSAP 这两个 API 不太熟悉，可以看看下面的视频：