GSAP 宣布完全免費！前端動畫神器全面開放，Webflow 強力加持

過去，想要在網站上實現精緻動畫不是件容易的事。GSAP 雖然功能強大，但許多進階插件如 ScrollTrigger、SplitText、MorphSVG 等，都需要額外付費，而且商業授權條款複雜難懂，讓不少開發者和設計師望而卻步。我們都渴望打造更具互動感與品牌質感的網頁體驗，卻常常因為成本與技術門檻，只能選擇妥協。

現在，這一切都改變了。

GSAP（GreenSock Animation Platform）正式宣布：自 2025 年 5 月起，全面免費開放所有插件與功能，包含原先僅限 Club GSAP 會員使用的高級套件，且允許不限規模的商業用途。這場前端動畫界的變革，由 Webflow 贊助並協同推動，不只是授權開放，更是整合深入，讓每位創作者都能零門檻進入專業級動畫世界。

同時，Webflow 也在第一時間完成深度整合，設計師現在可在無需寫程式碼的可視化平台中使用 GSAP 插件，即時預覽動畫效果，大幅提升設計效率，並促進與開發端的協同合作。GSAP 團隊也同步將所有插件發佈至 NPM，從本地開發到 CI/CD 自動化部署都更加順暢，徹底降低維護與使用門檻。

這篇文章適合正在學習動畫工具的前端新手、想讓設計更生動的 UI/UX 設計師，或是希望為品牌網站打造高互動體驗的工程師閱讀。

接下來，我將用三個實作範例，帶你快速上手 GSAP 的免費插件，從動畫效果、文字特效到滾動觸發一次學會！

如何立刻體驗全新免費 GSAP：安裝方法與經典範例

GSAP 免費化後，最令人興奮的莫過於——你現在只要 npm install，就能獲得過去需要額外付費的所有插件。以下我將用兩個最受歡迎的插件做實作示範，幫助你快速上手。

一鍵安裝：獲取所有功能

只需執行下列指令，即可下載最新版 GSAP 及全部插件，無需授權碼或註冊帳號。

npm install gsap

基礎動畫：Logo 360° 旋轉

See the Pen Untitled by Calpa Liu (@calpa) on CodePen.

這是最常見的動畫入門：讓一個 logo 旋轉，持續反覆播放，非常適合用來展示品牌活力或強調視覺焦點。

只需數行程式碼，讓任何元素動起來。以下例子讓 .logo 元素無限旋轉：

import { gsap } from "gsap";
gsap.to(".logo", {
  rotation: 360,
  duration: 2,
  ease: "power2.inOut",
  repeat: -1,
  yoyo: true
});

字體拆分動畫：SplitText 超細緻文字特效

See the Pen GSAP SplitText Example by Calpa Liu (@calpa) on CodePen.

GSAP 的 SplitText 插件讓你能將任何標題或段落文字瞬間拆分成單獨的字元、單詞、甚至行，並對每個部分進行獨立動畫。這種細膩的文字動效，能大幅提升網站的視覺層次感與專業度，常見於品牌引導頁、Landing Page 或內容型網站首頁。

想要實現專業級文字拆分動畫？GSAP 的 SplitText 插件讓你可以輕鬆將標題或段落細分為單字、字元，並為每個部分設計獨立動畫，打造令人驚豔的進場效果。下面提供一個完整範例，從 HTML 到 JS 動畫流程全解析：

首先，準備你的 HTML 結構：

<div class="headline text-4xl h-screen w-full flex flex-row items-center justify-center font-bold" style="opacity: 0;">
  Web Animation, Reimagined.
</div>

接著，透過 GSAP 與 SplitText 實現文字逐字進場、循環動畫：

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

// 1. 將 .headline 文字拆分為字元與單詞
const split = new SplitText(".headline", { type: "chars,words" });

// 2. 顯示標題容器
gsap.set('.headline', { opacity: 1 });

// 3. 逐字出現文字特效
gsap.from(split.chars, {
  y: 80,
  opacity: 0,
  stagger: 0.05,
  ease: "back.out(1.7)",
  duration: 1,
});

// 4. （進階）字元循環跳動動畫
gsap.to(split.chars, {
  y: 0,
  opacity: 1,
  stagger: 0.05,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut",
  delay: 1.5,
  duration: 0.7,
});

這樣就能讓你的標題文字逐字進場，並持續呈現動態效果。

滾動進場動畫：ScrollTrigger 實戰教學

See the Pen Untitled by Calpa Liu (@calpa) on CodePen.

ScrollTrigger 是 GSAP 最受歡迎的插件之一，它能讓任何動畫與頁面捲動產生連動互動。例如下列範例會讓 .section 在畫面進場時淡入並向上移動：

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".section").forEach(section => {
  gsap.from(section, {
    scrollTrigger: {
      trigger: section,
      start: "top 80%",
      end: "bottom 20%",
      scrub: true,
      toggleActions: "play none none reverse"
    },
    y: 100,
    opacity: 0,
    duration: 1
  });
});

進階玩法：多段落、多語言、SVG 全面支援

SplitText 絕不僅僅是單行標題動畫神器。無論你要拆分多行段落、處理多語系內容、特殊字體或結合動態資料，SplitText 都能精確控制：可拆分為行、單詞、字元三種粒度，覆蓋所有常見場景。

多語言與框架整合
SplitText 完美支援中文、日文、英文等多語系文本，並能與 React、Vue 等框架動態渲染內容無縫結合。你可以根據需求自訂分隔方式，例如僅針對單詞或字元做動畫，甚至可在元件更新時重新拆分，實現動態內容的進階動畫。

與 ScrollTrigger、Timeline 聯動
將 SplitText 與 GSAP 的 ScrollTrigger 或 Timeline 搭配，能輕鬆製作滾動進場動畫、交錯出現、循環特效等高級互動。只需幾行 JS，就能讓文字隨滾動活起來，打造富有層次的用戶體驗。

SVG 文字與路徑動畫
SplitText 亦可與 SVG 路徑動畫結合，讓字母或文字沿著曲線依序顯現、變形。這對於品牌視覺、Hero Banner、Landing Page 等場景極為實用，能大幅提升網頁吸睛度與互動性。

總結來說，SplitText 為現代網頁帶來前所未有的創意彈性。無論靜態頁面或動態內容、單語或多語，甚至 SVG 路徑動畫，都能以極低門檻實現專業級動畫效果。

常見問題：GSAP 免費化後我需要注意什麼？

Q1：GSAP 現在真的完全免費嗎？

是的！自 2025 年 5 月起，GSAP 官方宣布包含 ScrollTrigger、SplitText、MorphSVG 等所有插件全面免費，並開放商業用途，不再需要 Club GSAP 會員身份。

Q2：商業專案可以使用嗎？

沒問題。你可以自由將 GSAP 整合至個人、企業或 SaaS 專案中，不須額外購買授權。

Q3：哪些人適合學 GSAP？

• 想讓網站有更生動畫面效果的設計師
• 想快速做出互動介面的前端工程師
• 想用動畫提升品牌感與轉換率的行銷團隊

總結

Person wearing backpack standing on cliff in front of mountains during daytime (Andreas Chu)

GSAP 的免費化對前端圈意義重大。首先，學習與創作門檻大幅降低，初學者和設計師能無限制嘗試各種高級動畫效果。其次，所有插件均可整合至 CI/CD 流程，自動安裝與版本管理更加簡單。第三，Webflow 的深度整合讓設計師與開發者可以在同一平台預覽、調整動畫，實現真正的設計與開發無縫協作。最後，免費且高質量的動畫工具普及，將激勵更多創意與新型態網頁互動體驗的誕生。

展望未來，Webflow 表示將持續推動 GSAP 原生整合，讓動畫控制變得更直觀、靈活，甚至實現更多無需程式碼的動畫設計場景。官方也宣布將在 2025 年 5 月 9 日舉辦 YouTube 現場活動，深度解析整合細節與最新應用趨勢。同時，Webflow 聯合 CodePen 發起全球社群動畫挑戰賽，鼓勵開發者、設計師共創嶄新動畫作品。

總結來說，GSAP 全線免費不僅消除了商業授權與經濟障礙，更促進了產業內的合作與創新。無論你是專業前端、設計新手，還是大型團隊，都能藉由這一波新政，快速升級網站動畫品質，拉近設計與開發的距離。隨著 Webflow 的高度參與，前端動畫技術即將進入前所未有的黃金時代。

延伸閱讀與資源

• GSAP 官方網站
• GSAP 插件與文件
• ScrollTrigger 官方文檔
• Webflow makes GSAP 100% free — plus more exciting updates