想要做好 網頁設計，加入 GSAP 動畫是提升互動感的關鍵一步。好多香港中小企網站版面整齊但靜止不動，其實真係幾悶。GSAP 就能解決這個通病，讓元素流暢地動起來，效能亦遠優於純 CSS 動畫。
無論你是零基礎，還是覺得 CSS transition 唔夠用，這篇教學都會幫你建立清晰概念。我會透過實際 網站設計服務 範例，帶你掌握核心 網頁製作 技巧，助你打造出更具吸引力的 專業品牌網站，讓訪客一入嚟就覺得好高級。
認識GSAP動畫核心概念
GSAP 全名 GreenSock Animation Platform，是由 GreenSock 開發的 JavaScript 動畫庫，被廣泛應用於全球頂尖互動網站。它不是框架，也不是設計工具，而是一套專門控制動畫行為的 JavaScript 函式庫。
很多人第一次接觸 GSAP 都會問：「我用 CSS 動畫不就夠了嗎？」這個問題很合理。CSS animation 對於簡單的 hover 效果、淡入淡出已經足夠，但一旦涉及多個元素的序列動畫、滾動觸發、或需要精確控制動畫進度，CSS 就開始力不從心。
| 特性 | CSS 動畫 | GSAP 動畫 |
|---|---|---|
| 語法複雜度 | 簡單 | 中等，結構清晰 |
| 序列控制 | 困難 | 內建時間軸支援 |
| 滾動觸發 | 不支援 | ScrollTrigger 插件 |
| 效能 | 良好 | 優化更全面 |
| SVG 動畫 | 有限制 | 完整支援 |
GSAP 的核心由幾個基本概念組成：Tween（補間動畫）是最基礎的單位，負責控制一個或多個元素從 A 狀態過渡到 B 狀態；Timeline（時間軸）則是將多個 Tween 串聯起來，讓你精確控制整個動畫序列的節奏與順序。理解這兩個概念，你就掌握了 GSAP 的骨幹。
GSAP基礎語法快速上手
引入 GSAP 很簡單，可以透過 CDN 直接加入你的 HTML，或用 npm 安裝到現有的 JavaScript 專案。官方文檔建議初學者先用 CDN 方式快速測試。
最常用的三個方法
- gsap.to()：從當前狀態動畫到指定狀態，最常用
- gsap.from()：從指定狀態動畫回當前狀態，適合入場動畫
- gsap.fromTo()：明確定義起點與終點，控制最精確
一個最基本的 gsap.to() 範例：選取一個 .box 元素，讓它在 1 秒內向右移動 200px，同時淡出至透明度 0.5。你只需要兩行代碼就能完成，這正是 GSAP 的魅力——語法直觀，效果即時可見。
動畫屬性方面，GSAP 幾乎支援所有 CSS 屬性，包括 x、y、rotation、scale、opacity、backgroundColor 等。特別值得一提的是，GSAP 會自動處理瀏覽器前綴問題，你不需要手動寫 -webkit- 這類煩人的前綴，節省不少時間。
緩動函數（Easing）
動畫是否自然，緩動函數至關重要。GSAP 內建大量 ease 選項，例如 power2.out（快入慢出，模擬自然減速）、bounce.out（彈跳效果）、elastic.out（彈性回彈）。初學者建議先熟悉 power1 至 power4 系列，這是日常網頁動畫最常用的一組。
掌握時間軸控制技巧
如果你只學一樣 GSAP 功能，Timeline 絕對是最值得投入時間的。它解決了一個幾乎所有前端設計師都遇過的問題：如何讓多個元素按順序、按節奏逐一出現？
用純 CSS 做序列動畫，你要手動計算每個元素的 animation-delay，改一個元素的時間，整條序列都要重新計算。用 GSAP 的 Timeline，你只需要建立一個 tl 物件，然後用 tl.to() 逐步加入動畫，GSAP 會自動排序。
Timeline 的位置參數
- 預設（無參數）：接在上一個動畫結束後執行
- “<“：與上一個動畫同時開始
- “-=0.3”：在上一個動畫結束前 0.3 秒開始，製造重疊感
- 數字（如 1）：從時間軸第 1 秒開始，精確定位
這個位置參數系統是 GSAP Timeline 最強大的地方。只要你熟練掌握，就能輕鬆設計出有層次感的入場動畫序列，標題先出現、副標緊跟、圖片最後淡入——整個節奏完全在你掌控之中。
打造流暢滾動動畫效果
ScrollTrigger 是 GSAP 的官方插件，讓動畫與頁面滾動位置連動，是目前網頁設計中最受歡迎的互動效果之一。香港不少品牌官網、餐廳網站都用這個技術來提升視覺層次感。
基本用法是在 Tween 中加入 scrollTrigger 物件，指定 trigger（觸發元素）、start（何時開始）、end（何時結束）。例如設定「當 .section 進入視窗底部時開始動畫，離開視窗頂部時結束」，這樣使用者捲動到該區域，動畫就自動播放。
滾動動畫常用設定
- scrub: true：動畫跟隨滾動進度播放，放開即暫停，往回捲即倒退
- pin: true：將元素固定在視窗，讓滾動動作控制動畫進度，常用於全屏 Storytelling
- markers: true：開發時顯示觸發點標記，方便調試，上線前記得移除
- toggleClass：滾動觸發後為元素加入 CSS class，適合配合 CSS 做樣式切換
需要留意，滾動動畫要避免過度使用。每個區塊都做 ScrollTrigger 動畫，反而讓用戶感到疲憊，甚至影響可讀性。建議只在視覺重點區域、英雄圖、數據展示區使用，其他地方保持簡潔。
設計互動式動畫體驗
除了自動播放和滾動觸發，GSAP 也非常適合做事件驅動的互動動畫，即用戶點擊、懸停、輸入時觸發的動畫反饋。
最常見的應用是 hover 互動。你可以在 mouseenter 事件中用 gsap.to() 讓元素放大或移動，在 mouseleave 事件中用 gsap.to() 還原，效果比 CSS transition 更流暢，因為 GSAP 會自動處理動畫被中斷的情況，而不會產生跳動。
GSAP 互動動畫實用技巧
用 gsap.quickTo() 做游標跟隨效果是非常受歡迎的應用——讓自定義游標以略微延遲的方式跟隨真實游標移動，製造出柔軟、有重量感的視覺效果。這個效果在 Portfolio 網站和品牌旗艦頁特別流行。
另一個值得學的是 GSAP 與 SVG 的結合。SVG 路徑動畫、圖標描繪效果，都可以透過 GSAP 精確控制，而且比 CSS SVG 動畫更穩定、跨瀏覽器相容性更好。
優化動畫效能與相容性
動畫做得再靚，如果在低階手機上卡頓，就失去意義。GSAP 本身已針對效能做了大量優化，但作為開發者你還是需要注意幾個關鍵點。
效能優化要點
- 優先動畫 transform 和 opacity：這兩個屬性只觸發 GPU 合成層，不影響頁面排版（reflow），效能最佳
- 避免同時動畫大量 DOM 元素：100 個元素同時動畫，即使 GSAP 也頂唔順，考慮用 stagger 分散
- 使用 will-change 謹慎：GSAP 會自動處理，過多手動設置反而造成記憶體負擔
- 行動裝置上減少複雜動畫：可用
matchMedia判斷裝置，為手機版設置較簡單的動畫
相容性方面，GSAP 支援所有現代瀏覽器，包括 Chrome、Firefox、Safari、Edge，以及 iOS Safari 和 Android Chrome。官方說明 GSAP 可追溯至 IE9，但對香港大多數網站來說，支援現代瀏覽器已綽綽有餘。你可以參考 GSAP 官方文檔 查看最新相容性說明。
實戰GSAP動畫範例解析
說再多不如直接看範例。以下是幾個在實際網站設計中常用的 GSAP 動畫場景：
範例一：頁面載入動畫序列
網站打開時，Logo 先淡入、導航欄從上滑下、英雄標題從左飄入、CTA 按鈕最後彈出。這整個序列用 GSAP Timeline 大概 15 行代碼就能完成，而且每個元素之間的時間關係完全可調，改一個數字就能讓整體節奏快慢。
範例二：數字計數動畫
企業官網常見的「我們服務了 500+ 客戶」數字滾動效果，用 GSAP 配合 ScrollTrigger，當用戶滾動到統計區域時自動從 0 計數到目標值，視覺衝擊力強。透過 snap 設定可以確保數字只顯示整數，不會出現小數點。
範例三：卡片懸停 3D 傾斜效果
監聽滑鼠在卡片內的位置，計算相對中心點的距離，用 gsap.to() 動態調整 rotateX 和 rotateY，製造出立體傾斜感。配合 CSS 的 perspective 屬性，能讓靜態的產品卡片瞬間充滿互動感。
- 實作細節： 建議加入
ease: "power2.out"讓傾斜動作有適度的緩衝，避免反應過於生硬。當滑鼠離開時，使用gsap.to(element, { rotateX: 0, rotateY: 0 })確保卡片平滑地回歸原位。
GSAP 偵錯與常見陷阱
即便 GSAP 語法直觀，新手上路仍常遇到幾個「明明寫了卻不動」的情況：
- 選取器錯誤： 確保你的
.class或#id正確。如果元素是動態生成的，請確保在 DOM 載入後才執行 GSAP 代碼。 - 屬性拼寫： GSAP 使用小駝峰命名（CamelCase）。例如 CSS 的
background-color在 GSAP 中要寫成backgroundColor。 - 重複觸發： 在做
hover或scroll動畫時，如果舊動畫還沒播完就觸發新動畫，可能會產生衝突。可以使用overwrite: "auto"參數讓 GSAP 自動處理覆蓋邏輯。
給設計師與開發者的協作建議
在香港的製作環境中，設計師往往有天馬行空的想像，但開發者擔心效能。GSAP 正是兩者之間的橋樑。
- 設計師： 試著用 Timeline 的邏輯來思考動畫節奏，而不是單一的動效。可以先用 Lottie 或簡單的影片向開發者展示你想要的「緩動感」。
- 開發者： 善用 GSAP DevTools（需會員），它可以讓你直接在瀏覽器中像剪片一樣拖動時間軸、調整速度，這對於與設計師現場微調效果非常有用。
總結：讓網站從「靜態」變為「生動」
學習 GSAP 不只是學習一個工具，而是學習如何引導用戶的視線。成功的動畫應該是無形的——用戶不會覺得「這個動畫好酷」，而是會覺得「這個網站用起來好順」。
對於香港中小企來說，適度的 GSAP 動效能瞬間拉開你與競爭對手的距離，建立專業、高品質的品牌形象。
