GSAP（GreenSock Animation Platform）

GSAP是专业前端团队用于构建高性能交互动画的JavaScript库，被Apple、Nike、Sony等品牌用于官网动效，支持从UI微交互到沉浸式WebGL的全场景动画。

它能做什么

GSAP的核心能力是让开发者用简洁API控制JS能触及的任何渲染目标。官网强调“Animate Anything”，覆盖UI、SVG、WebGL三大领域。

• UI动效: 通过Flip插件实现布局动画，Draggable和Inertia插件支持拖拽与惯性滚动
• SVG动画: MorphSVG插件可将圆形变形为星形，DrawSVG实现描边绘制效果
• 文本特效: SplitText插件拆分字符/单词，ScrambleText插件产生文字乱码切换效果
• 滚动叙事: ScrollTrigger插件将滚动行为映射为动画进度，支持scrub实时同步
• 时间轴编排: gsap.timeline()可精确控制多段动画的顺序、重叠和延迟

核心优势与性能

GSAP底层基于requestAnimationFrame优化渲染帧，在低性能设备上仍能保持高帧率。其缓动系统内置Power4、Elastic等数十种预设曲线，并支持自定义贝塞尔曲线。

• 兼容性: 支持IE9+及所有现代浏览器，包括移动端
• 插件生态: 官方提供ScrollTrigger、MorphSVG、SplitText、MotionPath等十余个专用插件
• 模块化设计: 核心库仅需gsap.min.js，按需加载ScrollTrigger等插件
• 社区资源: 官网提供Showcase案例库、CodePen合集和官方论坛

怎么上手

通过CDN或npm安装后，一行代码即可实现基础动画。官方提供入门文档、学习中心和视频课程。

• 安装: CDN引入gsap.min.js，或npm install gsap
• 基础方法: gsap.to()从当前状态到目标值，gsap.from()反向，gsap.fromTo()自定义起止
• 注册插件: 使用gsap.registerPlugin(ScrollTrigger)激活滚动触发功能
• 学习路径: 官网建议先掌握to/from/timeline，再进阶ScrollTrigger和SVG插件

注意事项

GSAP全面免费后不再需要商业许可，但官方仍提供付费的GSDevTools调试工具。

• 免费范围: 所有核心库和官方插件（包括ScrollTrigger、MorphSVG等）均免费
• 框架集成: 官方提供React集成指南，Vue/Angular通过原生API即可使用
• 性能提示: 避免在滚动动画中频繁触发重排，建议配合will-change属性

常见问题

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

A1：ScrollTrigger是GSAP的滚动插件，能将滚动位置直接映射为动画进度（支持scrub实时同步），而Intersection Observer只能检测元素进入视口，无法实现滚动驱动的连续动画。GSAP还提供ScrollSmoother插件实现平滑滚动效果。

Q2：GSAP的MorphSVG插件支持哪些SVG变形方式？

A2：MorphSVG支持任意两个SVG路径之间的平滑变形，包括圆形变星形、多边形变曲线等。需要注册MorphSVGPlugin后使用morphSVG属性，支持repeat和yoyo实现往返变形动画。

Q3：GSAP免费后还有哪些付费功能？

A3：2024年全面免费后，所有核心库和官方插件均免费。付费工具是GSDevTools（用于调试和可视化时间轴），但非必须。商业项目无需额外授权。

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

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