核心动画方法

GSAP 日常 90% 的代码都落在这四个 API：to、 from、fromTo、 set。它们的差别只在于「起点从哪来」。

方法	起点	终点	适用场景
`gsap.to(target, vars)`	元素当前计算样式	vars 里写的值	最常用：按钮位移、淡出、滚动后滑入
`gsap.from(target, vars)`	vars 里写的值	元素「本来」的样式	入场：从下方 40px、opacity 0 回到排版位置
`gsap.fromTo(target, from, to)`	from 对象	to 对象	当前状态不可靠时（会被别的动画改过）需要锁死两端
`gsap.set(target, vars)`	—	立即写入	初始化、重置、无过渡的状态切换（等价 duration: 0）

1. gsap.to() — 从当前状态到目标

x 是 GSAP 对 translateX 的快捷写法，单位默认 px。不要同时用 CSS transition 抢同一属性，会打架。

gsap.to("#box1", {
  x: 400,              // 快捷属性：transform: translateX(400px)
  duration: 2,         // 秒；也可写 duration: 0.5
  ease: "power2.out"   // 先快后慢，适合「到达」类动作
});

2. gsap.from() — 从指定状态回到当前

创建 tween 的瞬间会立刻把元素放到 from 状态（immediateRender 默认 true），然后再播到「CSS 里写死的那套外观」。适合首屏入场。

FROM

gsap.from("#box2", {
  x: 400,
  opacity: 0,
  duration: 2,
  ease: "back.out(1.4)" // 轻微过冲，入场更有弹性
});

3. gsap.fromTo() — 锁死起点和终点

第二个参数才是「动画控制项」：duration / ease / delay 都写在 to 对象里，不要写在 from 里。

FROMTO

gsap.fromTo("#box3",
  { x: 0, scale: 0.5 },                         // from：只放视觉属性
  { x: 400, scale: 1.5, duration: 2, ease: "power2.inOut" } // to：视觉 + 控制
);

4. gsap.set() — 无动画瞬间赋值

重置舞台、把元素放到屏幕外、切换 display 前先 set 初始 transform，都用它。

SET

gsap.set("#box4", {
  x: 300,
  rotation: 45,
  scale: 1.2
});

target 能传什么

类型	例子
CSS 选择器	`".card"`、`"#hero"`、`"nav a"`
DOM 节点	`document.getElementById("box")`
数组 / NodeList	`gsap.to([a, b, c], { y: 20 })`
普通对象	`gsap.to(obj, { value: 100 })` 做计数器

同一元素连续 to() 默认 overwrite 策略是 auto：后写的动画会接管冲突属性，未冲突的属性继续播。需要「后来的完全干掉前面的」时用 overwrite: true。详见下一页 Vars。