在快要一年前，曾經寫過〈使用 GSAP CSSRulePlugin 選取虛擬元素〉，來製作底線的特效。最近則因為公司網站又要再度改版，大幅提升動畫的使用比例，因此開始進一步研究 GSAP 的使用方法。
今天主要是用下面的範例來說明一些 GSAP 3 的基本作法，以及我之前需要修正的錯誤。
See the Pen background-crop by Eric Chuang (@eric-chuang) on CodePen.
內容目錄
GSAP 3 的基礎原理
我在 iT 鐵人賽當中，曾經寫過 GSAP 的簡單介紹，以及應該要如何運用在 WordPress 當中。GSAP 是一款專門製作網頁動畫的 JavaScript 函式庫，而網頁動畫的基本原理，便是將頁面中的元件，根據不同事件 (點擊、捲動、計時等) 來改變樣式屬性值 (例如位置、大小、顏色)。
GSAP 3 的基礎語法
GSAP 3 與舊版最大的差異，在於 GSAP 3 將原本的 TweenLite、TweenMax、TimelineLite 與 TimelineMax 整合為 gsap 物件。
// 舊版將時間軸實體化的作法
const tl = new TimelineMax();
// 新版實體化時間軸的作法
const tlNew = gsap.timeline();
// 基礎語法
時間軸.方法( '選擇器', {屬性值} );
// 讓具有 .title-bg 類別的元素在 0.5 秒內的不透明度變成 1
tlNew.to( '.title-bg', {
duration: 0.5,
opacity: 1
};關於基本語法中的屬性值，如果是遇到有連字號 (-) 的樣式屬性，則需要使用 JavaScript 的「駝峰式大小寫命名法 (Camel Case)」，例如 backgroundSize、backgroundImage、clipPath 等。
其他的版本變更資訊，可以參考官方的升級公告。
範例說明
在文章一開始的範例中，除了 gsap 的核心函式庫外，我們引用了另外一個 GSAP 外掛，名叫 SplitText。和之前介紹的 CSSRulePlugin 一樣，我們可以透過引用這個外掛，製作 GSAP 可以選擇的物件。
SplitText 的基本語法如下，透過實體化一個 SplitText 物件，並選擇要分割文字的類型：逐字元 (chars)、逐詞 (words) 或逐行 (lines)。更詳細的組態設定，可以參考官方文件。
// 將 .title-bg 中的文字，以逐字元的方式切割
var mySplitText = new SplitText( ".title-bg", {
type: "chars"
});
// 選擇切割後的所有元素。如果前面的 type 使用了 words 或 lines，
// 也能夠用一樣的方式建立選擇器變數。
var chars = mySplitText.chars;將字元分割後，我們便可以為它們加上動畫效果：
// 定義時間軸
var tl = gsap.timeline();
// 透過變動 clipPath 的方式，製造出文字從左至右顯示的動畫效果。
tl.fromTo( chars, {
clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)",
webkitClipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)"
},
{
duration: 0.5,
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
webkitClipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)"
} );GSAP 的常見錯誤
根據官方網站的〈Most Common GSAP Mistakes〉一文，指出了幾點平常在使用 GSAP 時常見的錯誤：
- 使用 from() 方法的邏輯問題：from() 的功能是讓物件從定義的樣式，變成「當前值 (current value)」。因此在發生錯誤時，要先從「當前值」下手進行偵錯。
- 沒有預先設定 transform 屬性值：由於瀏覽器都是以像素 (pixel) 為單位回傳樣式計算結果，因此如果在 CSS 中使用了其他如 vw、vh 或 % 等單位，透過在 gsap 中定義 transform 屬性值，便可以提高準確度，也同時能提高系統效能。
- 未使用 xPercent 與 yPercent：製作位移動畫時，比起 x: “50%”，用 xPercent: 50 更好。
- 未使用函式 (functions) 包裝重複使用的動畫。
結語
GSAP 作為網頁動畫的重要函式庫，在 GSAP 3 的重大改版中，大幅減少了檔案的大小，改善效能問題，此外，也持續改進動畫物件的呼叫方式，用來提高轉譯的效率。
這次的範例使用了 SplitText 這款 GSAP 外掛，需要搭配配合 ShockinglyGreen 以上的付費方案，才能使用。費用大約是每年 3,000 元台幣。
隨著接觸 GSAP 越深，越能感受到 HTML+CSS+JavaScript 的緊密關係。許多網頁動畫，其實便是透過改變 CSS 的樣式屬性，達到不同的視覺效果，因此在學習網頁動畫的過程中，與其說是在學習 JavaScript，還不如說是在學習 CSS！
