Svelte

Svelte + gsap.context

官方 gsap-frameworks 模式：onMount 建立、cleanup 時 ctx.revert()、selector 作用域。

導讀

框架裡正確掛載與清理：onMount 建動畫、gsap.context 限縮 selector、unmount 時 ctx.revert()。

看什麼
字母 boxes 進場；下方 bar 的 progress 寫回 Svelte state。
怎麼試
調參數後離開再回來，確認沒有殘留 markers / 重複 trigger。
Skill 對應：gsap.context, onMount cleanup, scoped selectors
  • onMount 後再建立動畫（DOM 已存在）
  • gsap.context(fn, container) 限制 selector 範圍
  • 回傳 () => ctx.revert() 做 cleanup，避免 SPA 切頁後 trigger 殘留
onMount(() => {
  const ctx = gsap.context(() => {
    gsap.from(".box", { /* ... */ scrollTrigger: {...} });
  }, container);
  return () => ctx.revert();
});
Svelte 元件已 mount，selectors 只掃這個 container
Svelte · gsap.context(scope)
S
V
E
L
T
E
scrub + reactive state

progress 寫回 Svelte state：0% · active: false

離開頁面時 onMount cleanup 會 ctx.revert()