greensock/GSAP

# GSAP (GreenSock Animation Platform) [](https://gsap.com) GSAP 是一个**与框架无关**的 JavaScript 动画库，它能让开发者化身为动画超级英雄。构建可在**所有**主流浏览器中运行的高性能动画。为 CSS、SVG、canvas、React、Vue、WebGL、颜色、字符串、运动路径、普通对象等任何 JavaScript 可以触及的东西添加动画！GSAP 的 ScrollTrigger 插件只需极少的代码即可实现令人惊叹的基于滚动的动画。gsap.matchMedia() 让构建响应式且对无障碍访问友好的动画变得轻而易举。 没有其他任何库能在解决超过 1200 万个网站上的实际问题的同时，提供如此高级的序列编排能力、可靠性和精确控制。GSAP 能够克服无数浏览器的兼容性差异；让你的动画***顺畅运行***。从本质上讲，GSAP 是一个高速属性操纵器，随着时间的推移以极高的精度更新数值。它的速度比 jQuery 快达 20 倍！ GSAP 完全灵活；你可以随心所欲地在任何地方使用它。**零依赖。** 有许多可选的 插件 和 缓动 函数，可轻松实现各种高级效果，例如 滚动、变形、[文本分割](https://gsap.com/docs/v3/Plugins/SplitText)、沿 运动路径 制作动画或 FLIP 动画。甚至还有一个方便的 Observer 插件，用于统一不同浏览器/设备的事件检测。 ### 新手入门 [](https://gsap.com/get-started) ## 文档与安装 在此查看完整文档，包含一份安装指南。 ### CDN ``` ``` 请访问 JSDelivr 专属的 GSAP 页面，获取指向核心文件/插件快捷 CDN 链接。在 gsap.com 上还有更多安装说明。 **所有主流广告网络都将 GSAP 排除在文件大小计算之外**，并且大多数广告网络都在它们自己的 CDN 上托管了它，因此请联系他们以获取相应的 URL。 ### NPM 请在此查看通过 NPM 使用 GSAP 的指南。 ``` npm install gsap ``` GSAP 的核心几乎可以为任何内容添加动画，包括 CSS 和属性，此外它还包含了所有的实用方法，如 interpolate()、mapRange()、绝大多数缓动函数，并且它还支持吸附和修饰符功能。 ``` // typical import import gsap from "gsap"; // get other plugins: import ScrollTrigger from "gsap/ScrollTrigger"; import Flip from "gsap/Flip"; import Draggable from "gsap/Draggable"; // or all tools are exported from the "all" file (excluding members-only plugins): import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all"; // don't forget to register plugins gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin); ``` NPM 文件是 ES 模块，但还有一个包含 UMD 文件的 /dist/ 目录，以提供额外的兼容性。 ## GSAP 是免费的！ 感谢 [Webflow](https://webflow.com)，GSAP 现在 **100% 免费**，包括所有的奖励插件，如 [SplitText](https://gsap.com/docs/v3/Plugins/SplitText)、[MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) 以及所有以前仅对 Club GSAP 会员开放的其他插件。没错——整个 GSAP 工具集都是免费的，甚至可用于商业用途！🤯 在[这里](https://webflow.com/blog/gsap-becomes-free)阅读更多内容。 ### ScrollTrigger 与 ScrollSmoother 如果你正在寻找基于滚动的动画，GSAP 的 ScrollTrigger 插件是行业标准。此外还有一个配套的 ScrollSmoother 插件。 [](https://gsap.com/docs/v3/Plugins/ScrollTrigger) ### 使用 React？ 有一个 @gsap/react 包，它公开了一个 `useGSAP()` hook，可作为 `useEffect()`/`useLayoutEffect()` 的直接替代品，并能自动执行清理任务。请阅读 React 指南 了解详情。 ### 资源 * gsap.com * 新手入门指南 * 文档 * 演示与起始模板 * 社区论坛 * 缓动可视化工具 * 展示区 * YouTube 频道 * 速查表 * Webflow ### 需要帮助？ 请在友好的 GSAP 论坛中提问。或者分享你的知识去帮助他人——这是提升技能的绝佳方式！也可以在那里报告任何错误（或者如果你愿意，也可以在这里提交 issue）。 ### 许可证 GreenSock 的标准“免费”许可证可在 https://gsap.com/standard-license 查看。 版权所有 (c) 2008-2026, GreenSock. 保留所有权利。

标签：CMS安全, JavaScript, Web动画, 前端交互, 动画库, 数据可视化, 自定义脚本, 跨浏览器