Plugin
Flip：版面狀態過渡
點擊版面重排、4×4 lightbox 展開，以及 ScrollTrigger 驅動的 class／DOM 換父層滿版過渡。
導讀
FLIP = First, Last, Invert, Play。改 class 或 appendChild 換父層後補間；lightbox 用 cell 佔位 + fixed 層；接 scrub 則用捲動控制。
- 看什麼
- ① 重排、⑥ 點卡片 lightbox；往下 pin 區含中央/角落/gallery/⑤ 換父層。
- 怎麼試
- 點 lightbox 任一格再 Esc 收回；對比改 class 與 appendChild；調 duration / ease。
Skill 對應：Flip.getState, Flip.from, appendChild, lightbox, absolute, scale · ScrollTrigger scrub + pin
- 流程：
Flip.getState(targets)→ 改 DOM / class →Flip.from(state) - Lightbox：cell 佔位不動，只把 card
appendChild到 fixed 層，避免 grid 塌縮 - Scroll 版：先改最終 layout（class 或
appendChild），再Flip.from+ scrub/pin - 移動 DOM：
getState→target.appendChild(box)→Flip.from absolute: true過渡中用 absolute 定位，複雜 layout 較穩- register：
gsap.registerPlugin(Flip, ScrollTrigger)
const state = Flip.getState(card);
layer.appendChild(card); // cell 留空佔位
Flip.from(state, { absolute: true, duration: 0.55, ease: "power2.inOut" });① 點擊 · Flip layout
1
2
3
4
5
6
⑥ Lightbox · 4×4 點擊卡片展開滿版
點任一張卡片；再點背景、關閉鈕或按 Esc 收回。
② 中央小方塊 → 滿版（scale: true）
③ 角落小方塊 → 滿版（scale: false）
④ Gallery · 中間卡 → 滿版（nested）
L
R
⑤ 移動 DOM · 小容器 → 滿版大容器（appendChild）
to · 滿版容器
from · 小容器
getState → target.appendChild(box) → Flip.from