嗨咿，我是illumi，昨天講到gsap，今天就來裝他吧！

1. 安裝方式

把官網安裝打勾或不打勾 React 就可以看到安裝方式

不論框架是哪個，安裝指令都是：

# npm
npm install gsap

# yarn
yarn add gsap

# pnpm
pnpm add gsap

如果要用 React 官方 hook：

npm install @gsap/react

2. 引入方式

各框架引入的方式一樣：

import { gsap } from "gsap";

如果有用插件（例如 ScrollTrigger、Draggable），可以打勾官網想要加入的功能：

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

小補充：

有些打勾起來會有 gsap.registerPlugin();
這些原本是要加入會員才能用
但現在都免費了耶咿～

3. 框架差異

4. React為何要特別用useGSAP？

• React 生命週期特別麻煩，GSAP 團隊才專門寫了一個 Hook。
• Vue / Angular 因為有自己的生命週期 hook（onMounted、ngAfterViewInit），GSAP 不需要額外包裝。
• React 18 含 Strict Mode 會導致 useEffect 重跑兩次，useGSAP 自動清理不會產生重複動畫問題
• useLayoutEffect 可避免 DOM 預渲染閃爍，但 useGSAP 已內含該考量

useGSAP 優點

• 接受一個動畫函式與可選配置物件

• 使用 scope 限定動畫範圍避免全局滲漏

• 使用 dependencies 建立 state 變更後自動重跑的能力

• revertOnUpdate: true 可讓依賴變更時重新還原原動畫並更新

• 自動管理動畫與清理

  • 使用 GSAP 的 contextSafe 包裝互動事件，確保同屬於 useGSAP context，方便 unmount 時自動清理
  • 避免漏掉 Click / Timeout / EventListener 建立的動畫／程式邏輯造成 memory leak

• 高階設定

  機制	用途

  | scope | 控制動畫對象所在容器，避免 CSS selector 全局作用 |
  | dependencies | 控制動畫依據 state 變更而自動重新執行 |
  | revertOnUpdate | 指定是否在 dependency 更新時自動還原動畫 |
  | contextSafe | 包裝事件觸發動畫，使之納入 context 管理、避免記憶體遺漏 |

5. 快速上手

現在就來寫寫看吧～

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

const container = useRef();

useGSAP(() => {
  
  gsap.to(".el", {rotation: 180}); 

}, { scope: container }) 

好的我們明天就來正式上手了！