GSAP 滾動特效：從 ScrollTrigger 入門到流暢動畫教學

在專業的 網頁設計 流程中，利用 GSAP 打造流暢滾動特效是提升 品牌網站 質感的關鍵。比起生硬的純 CSS 效果，GSAP 配合 ScrollTrigger 插件是目前最成熟的 網站設計方案，能確保動畫在手機與電腦端皆具備極佳性能。

這篇文章將帶你掌握這套 網頁製作 必備技術，從安裝設定到實現滾動觸發動畫，助你避開常見性能陷阱。透過優化 網頁設計 的互動細節，能顯著增強用戶體驗，讓你的作品在視覺與流暢度上脫穎而出。

理解 GSAP 滾動動畫核心概念

GSAP 本身是一個 JavaScript 動畫庫，已存在超過十年，被 Google、Apple、AWS 等大型網站廣泛使用。它的強項在於動畫時間軸控制精準，加速和減速曲線（easing）的表現遠比 CSS transition 細膩。而 ScrollTrigger 是 GSAP 官方的滾動插件，讓你可以把任何動畫綁定到頁面滾動位置，實現「滾到哪、動到哪」的效果。

兩者的關係很簡單：GSAP 負責動畫本身的邏輯，ScrollTrigger 負責決定動畫在什麼滾動位置觸發、持續多久、要不要跟隨滾動進度同步。理解這個分工，之後的設定就會清晰很多。

這裡有個概念值得特別說清楚：ScrollTrigger 有兩種主要運作模式。一種是「觸發式」——滾動到指定位置就播放動畫，播完就算；另一種是「同步式（scrub）」——動畫進度跟著滾動條走，用戶滾多少，動畫就跑多少。前者適合一般入場效果，後者適合做視差滾動或 Pinning 效果，選錯模式是很多人做出來「感覺怪怪的」的根本原因。

安裝與設定 ScrollTrigger 插件

透過 CDN 快速引入

最快的方式是直接用 CDN，適合測試或小型項目：

• 引入 GSAP 核心：https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js
• 引入 ScrollTrigger：https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js
• 在 JavaScript 中註冊：gsap.registerPlugin(ScrollTrigger);

透過 npm 安裝（推薦正式項目使用）

如果你的項目用 Webpack 或 Vite，建議用 npm 安裝：npm install gsap，然後在 JS 檔案頂部 import 並註冊插件。這樣可以做 tree-shaking，避免載入不需要的模組，對網站速度有正面影響。

一個常見錯誤：忘記呼叫 gsap.registerPlugin(ScrollTrigger)。這步驟缺少的話，ScrollTrigger 根本不會運作，而且 console 不一定會報錯，只是靜靜地沒有效果——新手容易在這裡卡很久。

建立第一個滾動觸發動畫

最基礎的 ScrollTrigger 設定長這樣：

• trigger：指定哪個元素進入視口時觸發動畫
• start：定義觸發點（例如 “top 80%”，即元素頂部到達視口 80% 位置）
• end：定義動畫結束位置
• toggleActions：控制進入、離開、再進入、再離開時的動畫行為

一個實際的例子：讓一個卡片區塊在滾動進入時從下方淡入。設定 gsap.from(".card", { opacity: 0, y: 60, duration: 0.8, scrollTrigger: { trigger: ".card", start: "top 75%" } })。這段代碼很直接，gsap.from 代表從指定狀態動畫到元素原本的位置。

toggleActions 這個參數很多人忽略。它接受四個值，分別對應：進入、離開、再進入、再離開。例如 "play none none reverse" 代表進入時播放、離開時倒轉。如果你希望動畫只播一次，設成 "play none none none" 就好。

控制動畫時間軸與滾動同步

當你需要多個元素按順序動畫，用 GSAP 的 Timeline（時間軸）會比單獨設定每個動畫整齊得多。Timeline 可以讓你把多個 tween 串連在一起，控制整體節奏。

把 Timeline 和 ScrollTrigger 結合的方式是把 scrollTrigger 設定放進 gsap.timeline({}) 的參數裡，而不是放在個別動畫上。這樣整條時間軸會作為一個整體被觸發，動畫之間的相對時序保持不變。

如果你想做「滾動控制動畫進度」的效果，就要用到 scrub 屬性。scrub: true 代表動畫完全跟著滾動條走；scrub: 1 則加入 1 秒的緩衝延遲，讓動畫更順滑，不會跟手指滾動完全一比一，視覺上更舒適。這個細節差異相當明顯，值得自己試試感受。

實現平滑的滾動視差效果

滾動視差（Parallax）是讓不同元素以不同速度移動，製造出深度感。用 ScrollTrigger 實現視差效果，核心是設定 scrub 並調整元素的移動距離。

例如背景圖層移動較慢（y: -50），前景文字移動較快（y: -150），視覺上就會產生層次感。關鍵是要把視差元素的 CSS position 設定正確，否則元素位移後會影響整個版面的排版流向。

Pinning 是另一個常見需求——讓某個區塊在滾動時「釘住」畫面，直到一段動畫播完才繼續滾動。ScrollTrigger 的 pin: true 可以直接實現這效果，配合 scrub 就能做出像蘋果官網那種「滾動說故事」的體驗。不過 Pinning 對版面計算要求較高，特別是有多個 pin 區塊時，需要仔細規劃間距。

優化動畫性能避免卡頓

做滾動動畫，性能是最容易被忽略、也最影響用戶體驗的一環。以下是幾個實際有效的優化方向：

• 只動 transform 和 opacity：這兩個屬性由 GPU 處理，不會觸發 Layout Reflow。避免動畫 width、height、top、left 等會重新計算排版的屬性。
• 加入 will-change: transform：提示瀏覽器提前準備 GPU 層，但不要濫用，只對確實有動畫的元素加。
• 使用 GSAP 的 force3D 設定：GSAP 預設已啟用，確保動畫走 GPU 路徑。
• 批量動畫用 stagger 代替 loop：不要在 JS 裡用 forEach 逐一設定相同動畫，用 GSAP 的 stagger 參數一次處理，性能更好，代碼也更乾淨。
• 離開視口的動畫要 kill：在 Single Page Application（SPA）或路由切換時，記得用 ScrollTrigger.kill() 清理，否則動畫實例會累積，導致記憶體洩漏。

根據 GSAP 官方文件，ScrollTrigger 本身已針對性能做了大量優化，但最終效果仍取決於開發者如何使用。

設計響應式滾動動畫

響應式滾動動畫是個棘手的問題，因為不同屏幕寬度下，元素位置、觸發點、動畫幅度可能都需要調整。GSAP 提供了 ScrollTrigger.matchMedia()（舊版）和較新的 gsap.matchMedia() 方案，讓你可以針對不同 breakpoint 設定完全獨立的動畫邏輯。

實際做法是把不同屏幕尺寸的動畫分開定義：

• 桌面版（min-width: 1024px）：可以做較大幅度的視差位移
• 平板版（768px–1023px）：適度減少位移距離
• 手機版（max-width: 767px）：建議大幅簡化或關閉視差效果，因為手機滾動物理機制不同，複雜視差反而影響體驗

還有一點容易忽略：手機上的滾動事件觸發機制與桌面不同，iOS Safari 的慣性滾動可能導致 ScrollTrigger 計算位置不準確。建議在手機版測試時特別留意這部分，必要時用 ScrollTrigger.refresh() 手動更新位置計算。如果你的網站需要在各種裝置都保持穩定，網頁設計規劃階段就應該把響應式動畫的 breakpoint 策略納入考量。

測試不同瀏覽器兼容性

GSAP 官方聲明支援所有主流瀏覽器，包括 IE11（需要 polyfill）。實際測試中，問題最多的通常是 iOS Safari——慣性滾動（momentum scrolling）會讓 ScrollTrigger 的位置計算在快速滑動時出現短暫不同步。解決方法包括加入 ScrollTrigger.normalizeScroll(true)，但這會接管原生滾動行為，需要謹慎評估是否適合你的項目。

進階滾動特效應用實例

水平滾動區塊

把垂直滾動轉換成水平內容展示，是近年很流行的效果。做法是 Pin 住容器元素，然後用 scrub 把內容向左位移。需要注意的是這類效果在手機上體驗普遍不好，建議在小屏幕上 fallback 回正常垂直佈局。

文字分行入場

把標題文字按行或按字分割，逐一動畫入場。GSAP 有配套的 SplitText 插件（Club GSAP 會員才能使用），可以自動把文字分割成可操作的 DOM 元素。這類效果在品牌網站和作品集頁面非常常見，視覺衝擊力強。

SVG 路徑描繪

利用 ScrollTrigger 配合 GSAP 的 DrawSVGPlugin（或手動控制 stroke-dashoffset），可以實現「隨滾動進度畫出線條」的效果。這在展示產品流程圖或故事線時非常強大。

• 實作要點： 確保 SVG 路徑長度正確，並將 scrub 設定為 true。這樣當用戶向下捲動時，線條會像被畫出來一樣延伸；往回捲動時，線條則會縮回，互動感極強。

ScrollTrigger 偵錯與排錯技巧

當動畫跑得不如預期時，GSAP 內建的 markers 功能是你的救星：

• 啟用 Markers： 在 scrollTrigger 設定中加入 markers: true。
• 視覺化線索： 頁面上會出現 start、end、scroller-start 和 scroller-end 的標籤。透過這些線標，你可以一眼看出為什麼動畫在不對的位置觸發，或者是為什麼 trigger 根本沒碰到視口。
• 解決「跳動」問題： 如果 Pinning 效果讓頁面突然跳動，檢查是否有其餘 CSS 設定了 overflow-x: hidden 或是 height: 100% 限制了 body 的高度計算，這常是造成 ScrollTrigger 定位失準的元兇。

總結：從小處著手，讓動效服務於內容

GSAP 與 ScrollTrigger 的強大在於其無限的擴充性，但身為開發者，最重要是記住：「動畫是用來引導用戶視線的，而不是用來炫技的。」 過多的滾動特效會增加用戶的認知負擔，甚至導致 3D 暈眩感。

成功的滾動特效應該是流暢、不卡頓，並且能在不同裝置上穩定呈現。當你掌握了 Timeline、Scrub 和 Pinning 這三大核心後，你基本上就能做出任何你在高端品牌網站上看到的互動效果。