註冊Plugins﹙前端好好玩用 GSAP 做一個特效﹚

GSAP 除了有主要的函式衷外，也有對應增加的擴充套件。

註冊 Plugins 方式一：CDN 引用 HTML script src 結構

以 ScrollTrigger 插件為例，在 HTML 結構中加入下面的程式碼就完成了，

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

加入後在 js 的程式碼中，以 gsap.registerPlugin() 註冊方法引用，就可以使用 ScrollTrigger 相關功能了。。

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", { ... })

1 2	gsap.registerPlugin(ScrollTrigger); gsap.to(".box", { ... })

多個註冊插件引用方式。

gsap.registerPlugin(PluginName_1, PluginName_2, PluginName_3, ...);
gsap.to(".box", { ... })

1 2	gsap.registerPlugin(PluginName_1, PluginName_2, PluginName_3, ...); gsap.to(".box", { ... })

安裝 GSAP 時，本身自動帶上 ScrollTrigger 插件，不需要再安裝 ScrollTrigger，直接在專案中引入 GSAP 就好

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

1 2	import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger";

資料來源：
(16)前端好好玩用 GSAP 做一個特效 – 註冊 Plugins