GSAP 3 的使用基礎

在快要一年前，曾經寫過〈使用 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！

參考資料

• GSAP3：專門處理動畫與特效的 JS 套件
• GSAP 官方速查表 (cheatsheet)
• Tips for Writing Animation Code Efficiently
• Most Common GSAP Mistakes