嗨咿，我是 illumi，終於要進入到重頭戲 GSAP 了！

迫不及待要來用程式寫動畫了嗎？在開始之前我們先全面性了解他有什麼功能！

GSAP 就像是「在程式裡幫你做 AE 的事」，它讓你用程式碼來控制時間軸（Timeline）+ 關鍵影格（Keyframe）。

(AE畫面可點擊觀看影片）

1. 基本 Tween（單一屬性動畫）→ 1個圖層 2 個Keyframe

• AE 概念：你在 AE 裡，對一個圖層的 透明度（Opacity） 打兩個關鍵影格，從 0% → 100%。

• GSAP 寫法：

  gsap.to(".box", { opacity: 1, duration: 1 });
  
  

• 比喻：這就是 淡入（Fade In）的最簡單剪輯手法。
  

2. Timeline（時間軸組合）→ 1個↑ 圖層 2 個↑Keyframe

• AE 概念：把多個動畫放到一個合成（Comp）的 Timeline 裡，精準控制每個圖層的開始與結束時間。

• GSAP 寫法：

  const tl = gsap.timeline();
  tl.to(".box", { x: 100, duration: 1 })
    .to(".circle", { y: 100, duration: 1 }, "<"); // 與上一個同步
  
  

• 像在 AE 裡把「移動」和「掉落」兩段動畫剪成一條連續的序列，還能用 < 或 +=0.5 精準排時間。
  

3. Easing（緩動曲線）→Graph Editor(AE）、曲線變速（剪映）

• AE 概念：你在 Graph Editor 裡拉曲線，讓動畫不是「死板的線性」，而是快慢變化。

• GSAP 寫法：

  gsap.to(".box", { x: 200, ease: "power2.out" });
  
  

• 比喻：AE 的「Easy Ease」，就是 GSAP 的 ease。
  

4. ScrollTrigger（捲動觸發）→ 用滑鼠滾輪控制進度條

• AE 概念：假設有個「時間指針」，不是靠播放頭，而是靠使用者的滑鼠滾輪推進。

• GSAP 寫法：

  gsap.to(".box", {
    x: 500,
    scrollTrigger: {
      trigger: ".section",
      start: "top center",
      end: "bottom top",
      scrub: true,
    },
  });
  
  

• 比喻：就像「把 AE 的播放頭交給滑鼠滾動控制」，常用在做 捲動視差動畫（Scroll Animation）。

5. Stagger（群組延遲）→每個圖層開始時間不同

• AE 概念：你有 3 個圖層，做一樣的位移，但每個圖層延遲 0.1 秒。

• GSAP 寫法：

  gsap.to(".item", { y: -50, stagger: 0.1 });
  
  

• 比喻：AE 的 Sequence Layers 功能，一層一層順序播放。

有哪些屬性可以控制？

是不是想下載了呀？先別急，不同框架適用不同的使用方法：

各框架怎麼用 GSAP？

• React → useGSAP（官方建議用 @gsap/react 插件）
• Vue → 可以直接用 onMounted 控制，或用 vue-gsap 包裝
• Svelte → 直接在生命週期 hook 裡寫 GSAP
• 純 JS → 直接 import gsap from "gsap"

明天就來講安裝和引入～