GSAP

专业前端开发者与创意工程师用GSAP在Web上实现丝滑动画——从UI微交互动效到沉浸式滚动叙事，覆盖SVG变形、文本拆分、拖拽交互等场景，核心库仅需一个script标签即可运行。

它能做什么

GSAP核心提供Tween与Timeline，可驱动任何JS可触及的属性（CSS、SVG属性、数组值、对象属性），内置power1-4、back、bounce、circ、elastic、expo、sine、steps(n)等缓动曲线，支持自定义曲线。插件体系覆盖滚动（ScrollTrigger、ScrollSmoother、ScrollTo）、SVG（DrawSVG、MorphSVG、MotionPath）、文本（SplitText、ScrambleText、Text Replacement）、UI（Flip、Draggable、Inertia、Observer）以及物理引擎（Physics2D、PhysicsProps）和调试工具GSDevTools。

• 滚动叙事: ScrollTrigger将动画绑定滚动位置，ScrollSmoother实现平滑滚动与视差，ScrollTo提供精准滚动定位
• SVG变形: MorphSVG在两个SVG路径间平滑过渡，DrawSVG模拟手绘描边效果，MotionPath让元素沿自定义路径运动
• 文本特效: SplitText将文字拆分为字符/单词/行，ScrambleText实现字符乱码替换动画，Text Replacement用于文本内容切换
• UI交互: Flip平滑计算元素位置/尺寸变化，Draggable支持拖拽与约束，Observer监听滚动/触摸/指针事件
• 性能保障: 内置ticker带滞后补偿（lag smoothing），context()与revert()实现自动清理，matchMedia()支持响应式动画

怎么上手

GSAP框架无关，核心及插件均为纯JS文件。安装方式包括：通过script标签加载CDN（如gsap.com CDN）、NPM/Yarn安装、或下载zip包（内含minified、UMD、ESM及src源码目录）。官方提供React集成方案useGSAP()钩子，以及Webflow、WordPress专属安装指南。文档站内置Cheatsheet、YouTube教程和AI辅助搜索功能。

• CDN加载: 核心库与各插件均有独立CDN链接，按需引入
• NPM安装: npm install gsap，ESM格式适配现代构建工具
• zip包结构: /minified/用于生产，/UMD/用于调试，/ESM/用于构建工具，/src/为原始ES6模块
• React集成: useGSAP()钩子自动处理清理与依赖追踪
• 学习资源: 官方Docs含Quick Start、Demos、Cheatsheet，社区有Discord和论坛

收费与限制

自2025年起，GSAP在Webflow支持下已完全免费，无需购买任何会员即可使用全部功能（包括此前付费的ScrollSmoother、SplitText、MorphSVG等插件）。所有用户均可访问私有Discord、参与论坛、获取新功能通知。无功能限制，无商业使用限制。

• 免费范围: 核心库+所有插件（含ScrollTrigger、Draggable、Flip、MotionPath、Observer、ScrollTo等）
• 历史变更: 此前Club GSAP会员制已取消，无需付费或登录即可使用
• 维护方: 原GSAP团队全职受雇于Webflow，持续维护与开发

常见问题

Q1：GSAP的ScrollTrigger和ScrollSmoother有什么区别？

A1：ScrollTrigger是核心滚动插件，将动画与滚动进度绑定（如进入视口触发、滚动距离驱动进度）；ScrollSmoother是高级插件，提供平滑滚动效果并自动集成视差，需依赖ScrollTrigger。两者可单独使用或组合，ScrollSmoother需额外引入CDN。

Q2：GSAP的SplitText能实现哪些文本动画效果？

A2：SplitText将文本拆分为字符、单词或行，每个拆分单元可独立应用动画（如逐个淡入、旋转、位移）。支持自定义分隔符，与Timeline配合可编排复杂序列。需注意：SplitText会修改DOM结构，建议配合context()使用以自动清理。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。