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

發表於 2023-01-15 分類於 GSAP

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

註冊套件的方式有兩種，一種是直接在 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 就好

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

...

GSAP

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