SuperAPI AI 工具集

gsap-text

设计与创作

查看项目

更新于 10-16 00:30

技能介绍

GSAP 文本动画技能用于在网页中实现文字动画与特效,主要围绕三个插件展开。

用途:文本揭示、高亮、字符/单词/行动画、打字机、波浪、爆炸、故障、乱码解码以及随滚动触发的文字动效。

主要能力:SplitText 可将元素拆分为 chars、words、lines 并可组合,配合 gsap.from/to 与 stagger 实现逐字入场,支持 from: 'center'、'edges'、'random' 和 grid 网格错开;ScrambleTextPlugin 支持自定义字符集、speed、revealDelay 及文本替换,可做解码或乱码揭示;TextPlugin 支持文本替换、数字递增与数组短语切换。三者均可与 ScrollTrigger 组合,实现滚动揭示、滚动高亮和滚动乱码。

使用方式:安装 npm install gsap,按需导入并注册插件,例如 import { SplitText } from 'gsap/SplitText'; gsap.registerPlugin(SplitText)。SplitText 的 type 可指定拆分粒度;完成后调用 split.revert() 还原原始 HTML。响应式场景可用 gsap.matchMedia(),窗口尺寸变化时先 revert 再重新拆分。

适用场景:网站标题与段落入场、滚动叙事、终端或解码风格文案、计数器等。

限制与注意:过多拆分会影响性能,应只拆需要部分;动画结束或组件卸载时应 revert 以避免内存泄漏;乱码速度需保持可读;文档还建议考虑可访问性,但未提供具体做法。资料未说明收费细节,仅提及 SplitText 与 ScrambleTextPlugin 原为会员专属、现已包含。

资料未提供浏览器兼容性与授权价格等事实。