(16)前端好好玩用 GSAP 做一個特效 - 註冊 Plugins

前言

前一篇簡單的認識了一些 GSAP 官方套件，所以這一篇就會簡單的介紹一下該如何讓這些套件可以用在我們的專案中。

註冊 Plugins

註冊套件的方式有兩種，一種是直接在 HTML 中引入，另一種是透過 npm 安裝，而通常語法非常簡單，只需要在執行 GSAP 相關動畫操作之前撰寫一行程式碼就好了。

這邊舉例 ScrollTrigger 註冊方式，假使你是使用 CDN 方式載入 ScrollTrigger 的話，其實很簡單，只需要掛入以下 CDN

1

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

接著並撰寫以下程式碼

1
2
3

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", { ... })

這樣子就成功把 ScrollTrigger 注入到 GSAP 中，然後你就可以使用 ScrollTrigger 相關功能了。

但如果你要註冊多個套件，則是可以這樣寫

1
2
3

gsap.registerPlugin(Plugin Name, Plugin Name, Plugin Name);

gsap.to(".box", { ... })

如果是使用 npm 的話，則會有一點不同，雖然你是輸入以下 npm 指令來安裝套件

1

npm install gsap

接著呢？其實當你安裝 GSAP 時，本身就會自動安裝 ScrollTrigger，所以你不需要再安裝 ScrollTrigger 了，只需要在你的專案中引入 GSAP 就好

1
2
3
4

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

...

那麼這一篇就差不多到這邊，算是一個非常簡單的章節，我們下一篇見囉。