跳过主要内容
详细讲解

GSAP 是“框架无关的”,这意味着它可以用于 React、Webflow、Wordpress 或任何其他 JS/Web 框架中。GSAP 的核心文件和所有插件都只是JavaScript 文件.

这个视频和下面的安装助手都会介绍加载文件最常见的几种方式,分别是通过NPM, Yarn,以及使用简单的<script>标签。你可以根据自己的情况选择,或者在左侧子菜单中查看针对特定框架或工具的安装指南。

获取文件

ZIP 下载包里有什么?

ZIP 文件包含以下目录:

  • /minified/- 这很可能就是你需要的。将这些文件用 script 标签加载到网页中,具有广泛兼容性且高度压缩以实现最快的加载速度。
  • /UMD/- 压缩文件的未压缩版本,采用 UMD 格式(高度兼容)。通常这些文件用于较旧的构建工具或调试(因为源代码可读性强)
  • /ESM- ES 模块文件,向下转译以兼容现代构建工具(不包含高级的 ES6 特性)
  • /src/- 原始的源代码文件,属于现代 ES6 模块

安装助手

在找额外的插件吗?

感谢WebflowGSAP 现在100% 免费包括 ALL 所有额外插件,如SplitText, MorphSVG,以及其他原本仅限 Club GSAP 成员使用的插件。

找不到插件?请确保你使用的是最新版本——3.13

npm install gsap

导入并包含插件

插件
缓动效果
React

常见问题

我是否需要对每个插件调用 gsap.registerPlugin()?

通常是的。如果你是通过<script>标签(即不是通过构建工具)加载 GSAP 的,只要核心库已经加载,GSAP 将尝试自动注册插件,但我们仍建议手动注册插件,以防止构建工具在进行 tree shaking 时将其删除。你可以一次注册所有插件,例如:

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

多次注册一个插件是否有坏处?

没有,完全没有问题。这样做既没有好处,也不会造成伤害。

如果你在模块环境中使用,并想避免重复注册插件,可以将 GSAP 和所有需要用到的插件导入一个 gsap.js 文件,然后从该文件再导入所需内容到其他模块中。例如,使用 GSAP 核心和 DrawSVG 插件,gsap.js 可以这样写:

export * from "gsap";
export * from "gsap/DrawSVGPlugin";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);

然后在另一个文件中:

import { gsap, DrawSVGPlugin } from "../gsap.js"

我遇到了 TypeScript 错误,该怎么办?

首先,请确认你使用的是主GitHub 仓库中提供的官方 TypeScript 定义文件。如果问题依旧,请随时在我们的论坛中发帖,或者在GSAP GitHub 仓库上创建一个新问题。

{
"compilerOptions": {
...
},
"files": [
"node_modules/gsap/types/index.d.ts"
]
}

如何使用构建工具加载非 ES 模块版本的 GSAP?

有些构建工具可能无法理解 ES 模块,此时你可以改用 UMD(通用模块定义)格式。为此,只需在上面安装助手中点击 "NPM" 和 "UMD",然后复制生成的代码。例如:import { gsap } from "gsap/dist/gsap";(请注意所有的文件都在/dist/子目录中)

为什么我的生产环境构建失败?(可能在 webpack、vue-cli 或 create-react-app 中)

现代构建工具常常使用一种称为 tree shaking 的机制来移除未使用的代码。有时它们会过于激进地把插件代码删除,因为你没有在自己的代码中引用它们。为避免这种情况,你必须显式地使用gsap.registerPlugin

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

我能使用 GSAP 的旧版本吗?

当然可以!你可以前往 GitHub 的发布页面查看和下载 GSAP 的旧版本。不过我们推荐你使用最新版本。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗