核心

Stagger + Easing

多元素錯開進場：stagger 數字 vs 物件（from / each / amount），並對照常見 ease 曲線。

導讀

一次選很多元素時，用 stagger 讓節奏有層次；ease 決定「怎麼加速減速」。

看什麼
格子從中心／邊緣／隨機擴散的順序；不同 ease 的過衝感。
怎麼試
切換 from 模式、each 秒數，並對比 power / back / elastic。
Skill 對應：stagger, from center|edges|random, ease, function-based values
  • stagger: 0.05 = 每個目標間隔固定秒數
  • 物件寫法：{ each, from: "center" | "edges" | "random" }
  • 也可用 amount 把總時長均分給所有目標
  • function-based values：y: (i) => i * 10
gsap.from(".cell", {
  scale: 0,
  y: 24,
  stagger: { each: 0.04, from: "center" },
  ease: "back.out(1.4)",
  duration: 0.5
});
stagger · ease