老實說，每次看到那種滑起來超流暢、動畫跟著捲動完美同步的網站，我都會忍不住打開 DevTools 看它怎麼做的。十次有八次，答案都是 GSAP ScrollTrigger。這篇教學我會從零開始，帶你搞懂這個動畫神器的所有核心概念。

為什麼 GSAP ScrollTrigger 是捲動動畫的首選

你可能會想：CSS 不是有 scroll-timeline 了嗎？為什麼還要用 JavaScript 函式庫？原因很簡單：

瀏覽器支援：CSS Scroll-Driven Animations 還沒全面支援，ScrollTrigger 的相容性遠勝於此
精細控制：pin、scrub、snap、回呼函式，CSS 做不到這些
效能：GSAP 使用 requestAnimationFrame 和 GPU 加速，效能比自己寫的 scroll listener 好得多
生態系：跟 GSAP Timeline、SplitText 等外掛無縫整合

如果你對純 CSS 的方案也有興趣，可以看看 Rive 2 互動動畫教學了解另一種做法。

環境建置與基本設定

安裝方式很簡單，如果你用 npm：

npm install gsap
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

基礎觸發動畫：元素進場效果

最基本的用法是：當使用者捲動到某個元素時，觸發一個動畫。

gsap.from('.card', {
  scrollTrigger: {
    trigger: '.card',
    start: 'top 80%',
    end: 'bottom 20%',
    toggleActions: 'play none none reverse'
  },
  y: 100, opacity: 0, duration: 0.8, stagger: 0.2
});

這裡的關鍵參數是 start 和 end。格式是「觸發元素位置視窗位置」，可以用百分比、像素值、或 top/center/bottom 等關鍵字。toggleActions 控制四個狀態的行為：onEnter、onLeave、onEnterBack、onLeaveBack。

Scrub 模式：動畫跟著捲動走

這是 ScrollTrigger 最酷的功能之一。加上 scrub: true，動畫的進度就會直接對應捲動位置：

gsap.to('.progress-bar', {
  scrollTrigger: {
    trigger: '.content-section',
    start: 'top top', end: 'bottom bottom',
    scrub: 1
  },
  scaleX: 1, transformOrigin: 'left center'
});

scrub: true 是即時跟隨，scrub: 0.5 到 scrub: 3 會有不同程度的平滑延遲。我個人偏好 scrub: 1，既不會太生硬也不會延遲太久。

Pin 固定區段：全螢幕捲動敘事

Pin 是做全螢幕捲動敘事（scrollytelling）的核心功能。它會把一個元素「釘」在畫面上：

gsap.timeline({
  scrollTrigger: {
    trigger: '.story-section',
    start: 'top top', end: '+=3000',
    pin: true, scrub: 1
  }
})
.to('.scene-1', { opacity: 0 })
.from('.scene-2', { opacity: 0, scale: 0.8 })
.to('.scene-2', { opacity: 0 })
.from('.scene-3', { opacity: 0, y: 100 });

實戰：水平捲動畫廊

const sections = gsap.utils.toArray('.gallery-item');
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: 'none',
  scrollTrigger: {
    trigger: '.gallery-container', pin: true, scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => '+=' + document.querySelector('.gallery-container').offsetWidth
  }
});

實戰：文字逐行顯現效果

搭配 GSAP 的 SplitText 外掛，可以做出文字逐字或逐行飛入的效果。沒有 SplitText 授權的話，也可以自己用 span 包住每一行來達到類似效果。

實戰：多層次視差捲動

視差效果是讓頁面看起來有深度的經典手法。層數越多、速度差異越大，深度感就越明顯。但記得不要做得太誇張，不然使用者會頭暈。如果你想了解更多網頁動態效果，可以參考 Spline 3D 互動動畫教學。

效能優化：60fps 的秘密

只動 transform 和 opacity：不會觸發 layout reflow
避免大量 ScrollTrigger 實例：用 ScrollTrigger.batch()
善用 will-change：但不要濫用

ScrollTrigger.batch('.card', {
  onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1 }),
  start: 'top 85%'
});

響應式捲動動畫處理

行動裝置和桌面的捲動行為差很多。ScrollTrigger 提供了 matchMedia 來處理。手機上建議減少 pin 的使用（尤其是 iOS Safari 有一些 quirks），動畫也盡量簡化。相關的響應式設計概念可以看 Lottie 動畫嵌入教學裡對不同裝置的處理方式。

Debug 技巧與常見踩坑

ScrollTrigger 有內建的視覺化 debug 工具：markers: true。常見問題：動畫不觸發（start/end 設定錯誤）、Pin 完下面跳一段（CSS margin collapse）、動態內容導致位置錯誤（需要 ScrollTrigger.refresh()）、React/Next.js 整合（要在 useLayoutEffect 裡初始化）。