Carol Hsiao | Product Designer

甚麼是 Framer Motion 跟 GSAP?

在網頁開發的宇宙中，想讓靜態畫面動起來，最常被提及的兩大動畫 Libraries 就是 Framer Motion 與 GSAP。在親自實作並比較這兩者後，我對它們的底層邏輯、開發體驗以及適用場景有一些有趣的觀察，想透過這篇文章記錄下來。

它們是怎麼被發明的？

GSAP (GreenSock Animation Platform)：它是從 Flash 時代一路進化過來的。正因如此，它擁有極其豐富的學習資源與強大的社群支撐。當年在 Flash 退出舞台後，GSAP 轉向支援 JavaScript，並將其在 Flash 時強大的時間軸（Timeline）控制力完美繼承。GSAP 幾乎無所不能，因此非常適合應用在專門為感官體驗打造的專案中，例如：一頁式品牌行銷網站、互動式數位廣告、3D 沉浸式展間。GSAP 最具代表性的超能力功能包括：

ScrollTrigger：網頁捲動聯動動畫的絕對王者，能精準控制物件在特定滾動位置的吸附（Pinning）與擦除（Scrubbing）。
SplitText：能將整段文字自動拆解為單個字元（Characters）或單行（Lines），能輕鬆做出極具張力的文字飛入或打字機效果。
MotionPathPlugin：讓網頁物件可以沿著複雜的 SVG 路徑（如波浪、圓圈或自訂曲線）滑順地移動。

Motion（過去名為 Framer Motion)：相較之下，它是近代專門為 React 生態系誕生的 Library。React 常用於大型團隊協作的複雜專案（如 Web App、SaaS 工具型產品）。Framer Motion 的誕生就是為了解決 React 組件在進入（Mount）和離開（Unmount）DOM 樹時動畫難以處理的痛點。它非常擅長在功能型產品的細節中，提供舒適、自然且不突兀的微互動。

Developer 的開發體感差別

1. 學習曲線

GSAP (命令式開發)：功能強大到一開始會讓人手足無措。它不會幫你預設任何理所當然的動畫，你需要對時間軸、記憶體回收、DOM 節點有清晰的想法。但只要你掌握了用法，它就可以便得非常精準。物體的流動、停頓、反轉，全憑你的代碼工藝與審美品味。

Framer Motion (聲明式開發)：它極其好上手。你只需要像寫 HTML 屬性一樣，指定物件的起點（initial）與終點（animate），它就會自動幫你計算好中間絲滑的過渡。這條它幫你規劃好的 Happy Path（快樂路徑）能應付 80% 的 UI 需求。然而，當你需要做非常刁鑽、跨組件、需要精準依序執行的複雜長動畫時，你會發現它難以像 GSAP 那樣高度客製化，容易卡在邊界案例中。

2. 社群規模

GSAP：歷史悠久，擁有官方營運的 Greenfield 論壇，幾乎所有你踩過的坑，都能在論壇上找到創辦人或核心開發者的親自解答。教學資源：官方文件極其詳盡、CreativeCodingClub、各大 Awwwards 獲獎者的開源解析。

Framer Motion：雖然年輕，但因為乘著 React 的大浪，在 GitHub 和前端社群（如 Vercel 生態系）中也有極高的討論度。教學資源：Framer 官方範例、豐富的 React UI 庫（如 Shadcn/ui 的動畫底層）。

呈現效果的感官差別

1. 使用者操作體感

Framer Motion 像微風：隱形、自然、體貼。它融合在按鈕點擊、選單滑出、分頁切換的細節中。使用者甚至不會意識到這裡有動畫，但整個操作過程就是讓他們感到無比的精緻與舒適。

GSAP 像魔法：華麗、震撼、主角。當使用者進入網頁，跟隨著滑鼠或滾動條，看著 3D 物件旋轉、文字拆解重組。GSAP 是舞台上的焦點，負責帶給使用者驚喜與新奇，把網頁昇華成一場體驗大秀。

2. 殘障輔助與動態減損 (Accessibility & Motion Reduced)

現代網頁非常注重無障礙體驗，部分使用者因為前庭系統疾病（暈眩），會在作業系統中開啟減少動態效果（Prefer-reduced-motion）。

Framer Motion：具有現代化的貼心設計。你可以透過內建的 useReducedMotion Hook，一鍵判斷使用者的系統設定，當偵測到開啟時，自動將動畫切換成單純的淡入淡出（Fade）或完全靜止。

GSAP：同樣做得到，但需要開發者自己手動撰寫原生 JavaScript 的 window.matchMedia('(prefers-reduced-motion: reduce)') 來做條件判斷，並在外層包裹 ScrollTrigger.matchMedia()。雖然靈活度更高，但代碼量相對較多。

3. 效能表現 (Performance)

GSAP 的絕對優勢：GSAP 擁有獨立的優化高效 Ticker（基於 requestAnimationFrame），它會跳過 React 的虛擬 DOM 渲染機制，直接去修改最底層的 DOM 屬性或 WebGL 物件。當畫面上需要同時操縱數千個 DOM 節點或 Canvas 粒子時，GSAP 的 CPU 消耗極低，完全不會卡頓。

Framer Motion 的極限：因為它深深與 React 的渲染循環（Render Loop）綁定，如果同一個頁面有過多複雜的組件同時觸發 animate，React 的重新渲染（Re-render）機制可能會成為效能的瓶頸，因此更適合處理局部 UI 的互動。

總結

所以說這兩個函式庫沒有優劣之分，只有定位的不同：

當你的專案需要追求極致的視覺張力、全網頁滾動流暢度、甚至涉及 3D/Canvas 的操作，可以毫不猶豫選擇 GSAP，它能讓你的創意不受限。
當正在使用 React 開發一款講求操作體驗、產品細節與絲滑微互動的 SaaS 或工具平台，Framer Motion 能用最優雅、最省力的方式，為用戶吹拂一陣體貼的高級微風。

微風與魔法的交織：GSAP 與 Framer Motion 的實戰 PK