核心

to / from / fromTo / set

四種核心方法並列：to 從現狀到目標、from 進場、fromTo 雙端明確、set 立刻套用。

導讀

GSAP 動畫幾乎都從這四個方法開始。先搞清楚「誰是起點、誰是終點、要不要立刻套用」。

看什麼
四列各自有 Play / Reset；fromTo 左右分開調 from 與 to 的 x / y / rotation。
怎麼試
先單獨 Play 某一列，再改 fromTo 兩端對比；切換 immediateRender 看 from 的起點是否立刻套用。
Skill 對應：gsap.to · from · fromTo · set · autoAlpha · clearProps
  • to：從現狀 → 目標（最常用）
  • from：從指定起點 → 現狀（進場）；預設 immediateRender
  • fromTo：起點與終點都寫死，不讀現值
  • set：duration 0，立刻套用；淡入優先 autoAlpha
gsap.to(".a", { x: 120, y: 0, rotation: 180 });
gsap.from(".b", { x: 0, y: 80, rotation: 0, autoAlpha: 0 });
gsap.fromTo(".c", { x: -60, y: 40, rotation: -45 }, { x: 80, y: 0, rotation: 0 });
gsap.set(".d", { x: 40, y: -20, rotation: 45 });
core methods

to

to

from

from

fromTo

fT

from

to

set

set

每列可單獨 Play / Reset。to 的滑桿是終點；from 是起點；fromTo 左右分開調 from 與 to；set 立刻套用。共用 duration / ease 在左下角。