文字拆分动画

是什么

文字拆分动画是先把一段文字拆成独立的行、单词或字符元素，再分别给它们加动画。GSAP 的 SplitText 插件负责拆分这一步，自 3.13 起随 gsap npm 包免费提供，从 gsap/SplitText 导入并注册。3.13 版本对它进行了重写，新增 SplitText.create() 写法、mask 遮罩和 autoSplit 自动重拆，并默认处理无障碍：给原元素加 aria-label，拆出的片段设为对读屏软件隐藏。

上方演示用 type: 'lines,chars' 同时拆出行和字符，mask: 'lines' 给每一行包上一层裁切容器。字符从行的下方向上滑入，超出行框的部分被遮住，看起来像文字从一条缝里升起来；停留片刻后再向上滑出。

核心参数

参数	含义
type	拆分粒度：'chars'、'words'、'lines'，可逗号组合
mask	'lines'、'words' 或 'chars'，为对应片段加裁切容器
autoSplit	字体加载完成或容器宽度变化时自动重新拆分
onSplit	每次拆分后的回调，返回的动画会在重拆时被接管
linesClass / charsClass	给拆出的元素加类名
revert()	还原为拆分前的 DOM

代码示例

import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

const split = SplitText.create('.headline', { type: 'lines,chars', mask: 'lines' });

const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.6 });
tl.from(split.chars, { yPercent: 110, rotate: 6, duration: 0.8, ease: 'expo.out', stagger: 0.02 })
  .to(split.chars, { yPercent: -110, duration: 0.5, ease: 'power2.in', stagger: 0.012 }, '+=1.4');

// 不再需要时还原 DOM：split.revert();

什么时候用

• 首屏大标题、品牌口号等需要强调的短文本。
• 按行遮罩滑入的段落，营造杂志式的阅读节奏。
• 数字、关键词的逐字强调。

常见误区

• 在字体加载前拆分：换行位置会与最终渲染不一致。使用 autoSplit 或等 document.fonts.ready 后再拆。
• 对长段落拆字符：会生成成百上千个元素，拖慢页面，长文本按行拆即可。
• 拆分后不还原：在单页应用中切换页面前记得 revert()，避免残留大量包裹元素。