Plugin

SplitText：逐字動畫

把文字拆成 chars / words / lines，再 stagger 進場；用完要 revert。

導讀

逐字／逐詞動畫的標準做法。只拆需要的單位；卸載或重建前 split.revert()。

看什麼
標題依字元或詞浮現；mask 模式是否有裁切揭示感。
怎麼試
切 type、stagger、ease；反覆 Replay 確認無殘留 DOM。
Skill 對應：SplitText.create, type, stagger, onSplit, revert
  • 只拆需要的單位（chars / words / lines），效能較好
  • 自訂字型建議 document.fonts.ready 後再 split，或用 autoSplit + onSplit
  • 結束或重建前 split.revert() 還原 DOM
  • Webflow 收購後 SplitText 已免費，npm 直接 import
const split = SplitText.create(".heading", { type: "chars,words" });
gsap.from(split.chars, {
  y: 40, autoAlpha: 0, stagger: 0.03, duration: 0.5
});
// later: split.revert()
SplitText

Motion makes meaning.