(17)前端好好玩用 GSAP 做一個特效 - ScrollTrigger

前言

前面快速認識了如何註冊套件後，接下來將會針對 ScrollTrigger 套件是做個介紹，而 ScrollTrigger 套件可以說是非常的實用，因此才特別拉一篇來介紹它。

ScrollTrigger 是什麼？

ScrollTrigger 是由 GSAP 官方所推出的套件之一，其中主要用途是用於滾動動畫。

基本上許多你所看到的滾動效果網站，滿多都是使用到了 ScrollTrigger 套件，那麼廢話就不多說，這邊就準備開始吧！

ScrollTrigger 基本環境

基本上前一章節已經有說過 ScrollTrigger 的環境有哪兩種安裝方式了，而這邊將為採用 CDN 方式來示範，因此我就直接提供這一份 CodePen 方便到時候使用

那麼這一份環境內我有先準備好基本的 HTML 方便讓你練習用。

ScrollTrigger 基本使用

首先我們先來看看 ScrollTrigger 的基本使用方式，這邊我們先來看看如何使用 ScrollTrigger 套件來做一個簡單的滾動動畫。

ScrollTrigger 的使用方式非常簡單，只需要在你的 gsap.to 裡面補個屬性 scrollTrigger 就可以了，而裡面的參數則是用來設定觸發的條件。

1
2
3
4
5
6
7
8
9
10

gsap.registerPlugin(ScrollTrigger);

gsap.to("#target", {
  scrollTrigger: {
    trigger: "#target",
    start: "top",
    end: "bottom",
    scrub: true,
  },
});

那麼裡面的參數各自代表什麼意思呢？讓我們來認識一下：

• trigger：觸發的元素，也就是當滾動到這個元素時，就會觸發動畫。
• start：觸發的開始位置，也就是當滾動到 trigger 元素的 start 時，就會觸發動畫。
• end：觸發的結束位置，也就是當滾動到 trigger 元素的 end 時，就會結束動畫。
• scrub：是否要啟用滾動動畫，如果設定為 true，則會在滾動時，動畫會跟著滾動，如果設定為 false，則會在滾動到 end 時，才會觸發動畫。

那麼就這樣子而已嗎？其實還有更多的參數可以設定，後面我們再來慢慢介紹，這邊就先認識這幾個就好。

ScrollTrigger 基本範例

那麼這邊就來簡單示範一個範例，首先我們可以試著製作一個簡單的滾動動畫，當畫面滾動到 #box2 的區塊時，#text2 就會從 opacity: 0 變成 opacity: 1，那麼該怎麼寫呢？很簡單，只需要這樣寫即可：

1
2
3
4
5
6
7
8
9

gsap.to("#text2", {
  scrollTrigger: {
    trigger: "#box2",
    start: "top",
    end: "bottom",
    scrub: true,
  },
  opacity: 1,
});

這時候你可能會想說，奇怪怎麼都沒效果？其實原因是因為初始化的時候，#text2 的 opacity 已經是 1 了，所以你看不到變化，那麼我們可以試著把 opacity 設定為 0，然後再執行動畫，而這邊調整方式有兩種

第一種是直接替 HTML Class 補上一個 opacity-0 的樣式，讓它預設就是透明，第二種方式則是透過 GSAP 的預設值來設定，那這邊我們就用第二種方式來示範：

1
2
3
4
5
6
7
8
9
10
11

gsap.set('#text2', { opacity: 0 })

gsap.to("#text2", {
  scrollTrigger: {
    trigger: "#box2",
    start: "top",
    end: "bottom",
    scrub: false,
  },
  opacity: 1,
});

這樣你就可以看到你的第一個滾動動畫成功製作出來囉~