greensock/GSAP

项目介绍

GSAP 是一个零依赖的 JavaScript 动画库。它的核心是高速属性操纵器，按时间精确更新数值，因此能驱动 CSS 属性与特性、SVG、canvas、WebGL、颜色、字符串、运动路径以及普通 JavaScript 对象。它不绑定框架，可在各大浏览器中运行，适合需要制作界面动效、滚动效果和交互页面的前端开发者与设计师。

可选插件覆盖滚动动画（ScrollTrigger、ScrollSmoother）、SVG 形变（MorphSVGPlugin）、文本拆分（SplitText）、路径运动（MotionPathPlugin）、FLIP 过渡（Flip）以及跨浏览器事件归一化（Observer）。gsap.matchMedia() 用于构建响应式、兼顾无障碍的动画。React 用户可使用独立的 @gsap/react 包提供的 useGSAP() hook。

快速使用

以下两条安装路径任选其一。

CDN（浏览器页面）： 在页面中加入脚本标签，放在自己的动画代码之前：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

JSDelivr 的 GSAP 页面列出了核心文件与各插件的 CDN 地址。

npm（打包应用）：

npm install gsap

然后按需导入核心与插件，并在使用前注册插件：

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

gsap.registerPlugin(ScrollTrigger, Draggable, Flip);

README 还给出了 gsap/all 的导入方式，它重新导出除会员专属插件外的全部工具。插件必须先注册再使用。加载完成后即可对目标调用 gsap.to(...) 等方法；完整的动画示例见入门指南、示例和速查表。

使用约束

• npm 包为 ES 模块，另提供包含 UMD 文件的 /dist/ 目录以增强兼容性。
• GSAP 本身零依赖，但插件需要单独导入并注册。
• React 用户需要额外的 @gsap/react 包，并参照 React 指南使用。
• 所给仓库元数据未声明许可证，README 指向 GreenSock 的标准“免费”许可，商业使用前应核对条款。
• 插件文档、社区论坛与问题反馈入口位于 gsap.com 和 GitHub Issues。

HotRepo 点评

在 2026-11-01 的 JavaScript 语言月榜快照中，GSAP 当月新增 1,307 Star，位列该榜第 14 名，总 Star 数为 30,007。这条单独的月榜记录说明：一个创建于 2012 年的动画库在 JavaScript 生态中仍能获得可观的月度关注。数据只覆盖一个月度周期，不能据此判断持续趋势；JavaScript 月榜名次也不等同于全语言日榜。README 自述的“1200 万站点”与 Webflow 收购后全部工具集免费，解释了它为何仍被视为滚动动画和 SVG 动画的默认选择，而不是一个新入场者。