用途:为 GSAP 文字动画提供可直接套用的配方,聚焦 SplitText(拆分文字)与 ScrambleTextPlugin(乱码解码)两类效果,偏实战而非 API 参考;API 细节需配合官方 gsap-plugins 技能。流程位于 gsap-setup → gsap-animate → gsap-text → gsap-optimise → gsap-test 之中,依赖 greensock/gsap-skills。
主要能力:一是 SplitText 设置,调用前须 await document.fonts.ready,再通过 $lazyLoadSplitText 懒加载,并在 gsap.context 中创建、在卸载时对每个 split 调用 revert();二是遮罩词语上滑(生产模式),用 SplitText.create(el, { type: 'words', mask: 'words' }) 后设置 y 位移并用 scrollTrigger 驱动,是最常用的标题揭示写法;三是 ScrambleText 解码,用 scrambleText 对象传入 text、chars、revealDelay、speed,时长随文本长度调整。也提供 useReveal 组合式封装(init/hero/scroll/split),hero 用于首屏立即揭示,scroll 用 ScrollTrigger 逐元素触发,卸载自动清理。
使用方式:优先用 useReveal,如 const { init, scroll } = useReveal(sectionRef); onMounted(() => init(() => scroll())),并配合 .reveal 与 .text-reveal 预隐藏类避免 FOUC;手动方式则经 useNuxtApp 取 $gsap、$lazyLoadSplitText、$lazyLoadScramble。涉及文件有 composables/useReveal.js、plugins/gsap.js、assets/css/tailwind.css。
适用场景:Vue/Nuxt 页面中的标题上滑揭示、字符乱码解码、以及 references/text-patterns.md 所列的组合裁剪加乱码、动态字符拆分、弹性字排、3D 老虎机式滚动文字、横向文字(容器动画)、遮罩行揭示、ScrollTrigger 配 autoSplit 等。
限制与注意:必须先等字体就绪再拆分;autoSplit: true 仅用于按行(响应式回流),词/字符不需要,且须搭配 onSplit();父级用 autoAlpha 而子级遮罩时应改用 visibility;乱码前不可清空 textContent;并列的逐词补间需设 overwrite: false;SplitText 会保留 span,渐变样式需用 :deep(div);文档未提供具体版本要求、收费方式与安装命令。