GSAP比CSS动画更可控，因其直接操作transform等渲染属性、绕过重排、默认硬件加速，并在调度和插值上优化；需显式设置transformOrigin防错位，避免动画非合成属性，注意duration单位为秒及ease匹配场景。
gsap.to 为什么比 CSS 动画更可控
因为 gsap.to 直接操作元素的渲染属性（如 transform、opacity），绕过浏览器重排（reflow），且默认启用硬件加速（通过 will-change: transform 自动注入）。CSS 动画在复杂嵌套或频繁触发时容易卡顿，而 GSAP 在主线程调度上做了精细节流和插值优化，尤其适合滚动联动、手势拖拽等高帧率场景。
必须设置 transformOrigin 才能正确缩放/旋转
很多初学者发现 gsap.to(target, { scale: 0.5 }) 动画“偏了”，其实是默认以左上角为原点缩放。GSAP 不会自动读取 CSS 的 transform-origin，必须显式传入：
gsap.to(".box", {
scale: 0.5,
rotation: 45,
transformOrigin: "center center", // ← 关键！
duration: 1
});
-
transformOrigin值支持像素、百分比、关键词（如"50% 50%"、"top left"） - 若目标是 SVG 元素，注意其坐标系不同，建议统一用
"center center"配合svgOrigin参数（仅 SVG） - 不设该参数时，GSAP 默认使用
"0 0"，即左上角，极易造成视觉错位
避免在 gsap.to 中直接写 color 或 background-color
GSAP 支持颜色补间，但 color、background-color 等非合成属性会触发重排，破坏性能。真正高性能的动画只应驱动以下四类属性：
-
transform（x/y/scale/rotation等） opacity-
filter（如blur()、hue-rotate()） -
clip-path（现代浏览器）
如果必须动颜色，确保它只是辅助效果（如 hover 提示），且动画时长 ≤ 300ms；否则建议用 CSS 变量 + gsap.set() 预设，再用 gsap.to() 补间变量值：
立即学习“前端免费学习笔记（深入）”；
gsap.to(":root", {
"--accent-color": "#ff6b6b",
duration: 0.6,
ease: "power2.inOut"
});
duration 和 ease 的常见误配
GSAP 的 duration 单位是秒（不是毫秒），写成 duration: 300 就会播 300 秒——这是最常被复制粘贴坑到的地方。同时，ease 类型直接影响感知流畅度：
- 交互反馈类（点击、悬停）：用
"power1.out"或"sine.inOut"，快起快收 - 页面过渡类（路由切换）：用
"power3.inOut"，更舒缓 - 物理模拟类（弹跳、拖拽回弹）：必须用
"elastic"或"bounce"，且需配strength、decay等参数
别硬记名字，打开 GSAP Eases 可视化页 拖动看曲线，选最贴合你节奏感的那个。
真正难的不是写对一行 gsap.to，而是判断哪个属性该进动画队列、哪个该交给 CSS 处理、以及什么时候该用 gsap.fromTo 替代两次 to ——这些边界往往在真实交互动效里才暴露出来。
