gsap.to() 目标参数须传合法DOM节点、NodeList或数组，避免字符串选择器未加载/拼错导致静默失败，且不可传jQuery对象；位移旋转等用x/y/rotation走transform GPU加速，禁用left/top防重排；duration单位为秒，stagger基于目标列表自动分配延迟。
gsap.to() 的目标参数怎么传才不踩坑
传错目标类型是 gsap.to() 最常卡住的地方：字符串选择器（如 ".box"）会自动调用 document.querySelectorAll()，但若页面还没加载完、或选择器拼错，它不会报错，只是静默失败。DOM 节点、NodeList、数组都合法，但别传 jQuery 对象——GSAP v3 不再原生支持，除非你手动设 gsap.selector = $。
常见错误现象：gsap.to("#missing-id", { x: 100 }) 没反应；gsap.to(document.querySelector(".box"), { x: 100 }) 在元素不存在时返回 null，直接抛 Cannot tween a null target 错误。
- 确保 DOM 已就绪：把动画代码放在
DOMContentLoaded事件里，或用gsap.delayedCall(0, () => {...})推迟到下一帧 - 批量操作多个元素时，优先用 CSS 类选择器（
".item"），而非循环调用gsap.to()—— GSAP 内部做了批量优化 - 对 SVG 元素或 Three.js 对象补间时，第一个参数直接传对象本身（如
cube.position），不是字符串
位移/旋转/缩放该用哪组属性，为什么不能混用 left/top
x、y、rotation、scale 是 GSAP 的 transform 简写，它们最终写入 transform: translateX(...) translateY(...) rotate(...)，走合成层，GPU 加速；而 left、top 触发 layout（重排），强制浏览器同步计算样式和布局，性能断崖式下降。
常见错误现象：动画卡顿、掉帧，尤其在中低端手机上；Chrome DevTools 的 Rendering 面板显示频繁的 “Layout Shift”。
立即学习“前端免费学习笔记（深入）”；
-
x: 200默认单位是 px；x: "40vw"或x: "+=50"也完全合法，GSAP 会自动解析 - 要实现百分比位移（如垂直居中偏移），用
yPercent: -50，不是y: "-50%"—— 后者会被当字符串忽略 - 旋转单位默认是度（
rotation: 360），要弧度写rotation: "1.25rad"
duration、ease 和 immediateRender 这三个参数的实际影响
duration 单位是秒（不是毫秒），设成 0 就是硬跳变，等价于直接赋值 style；ease 控制缓动曲线，默认是 "power1.out"，不是 CSS 的 ease；immediateRender 只对 gsap.from() 和 gsap.fromTo() 有意义，gsap.to() 默认为 false，所以不用管它。
常见错误现象：动画一上来就闪一下（其实是 from() 默认立即读取当前样式导致）；缓动看起来“不对劲”，其实是用了未注册的 ease 字符串（如拼错成 "power2.outt"）。
- 想让动画延迟开始？用
delay: 0.3，不是靠setTimeout包一层 - ease 字符串必须准确，推荐从官方文档复制，或用
gsap.parseEase("power2.inOut")校验 - duration 设为
0.01也没用——requestAnimationFrame 最低帧率约 16ms，小于这个值仍按一帧执行
stagger 动画怎么控制起始顺序和网格布局
stagger 不是简单加 delay，它是基于目标列表自动分配时间偏移的调度器。值为数字（如 0.1）表示每个元素比前一个晚 0.1 秒启动；为对象时可指定 from（起始方向）、grid（自动识别 DOM 排列）、each（单个间隔）。
常见错误现象：多个元素动画“挤在一起”没 stagger 效果；grid 计算错位，比如本该从左到右却从上到下开始。
- 确保目标元素在 DOM 中是连续的兄弟节点，否则
grid: "auto"可能误判布局 -
from: "center"要求父容器有明确宽高，否则 fallback 到"random" - 需要自定义顺序？用函数形式：
stagger: (i) => i % 3 === 0 ? 0 : 0.2，但注意返回的是**总延迟**，不是增量
