GSAP动画需确保DOM就绪、选择器正确、属性写法合规：CDN脚本放</body>前，用x/y而非left/top，duration单位为秒，gsap.from()默认immediateRender:true易致闪动。
GSAP 动画在 HTML 中能直接跑起来，但“能动”和“动得对”是两回事——90% 的失败案例不是库没加载，而是 DOM 时机、选择器作用域或属性写法踩了坑。
怎么引入 GSAP 才不会报 gsap is not defined
CDN 是最稳妥的起步方式，但必须注意加载位置和顺序：
- 把
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/index.js"></script>放在</body>前（不是<head>），否则document.querySelector可能找不到元素 - 别用旧版 CDN 链接（如
gsap.min.js单文件），v3.12+ 推荐用index.js入口，它自动导出全部核心方法 - 如果用了多个
<script>标签且依赖顺序，加defer属性比靠位置更可靠
gsap.to() 动不起来？先查这三件事
gsap.to() 默认立即执行，不调 .play() 也能动；动不了大概率是目标没选中或属性冲突：
- 运行
console.log(document.querySelectorAll(".box"))，确认返回的是非空 NodeList - 避免混用
left和x：用x: 100（走 transform + GPU 加速），别写left: "100px"（触发重排，还可能被 CSS 覆盖） -
duration单位是秒，不是毫秒——写成duration: 500就等于 500 秒，动画会卡死在起点
gsap.from() 为什么一刷页面就闪一下？
因为它的默认行为是 immediateRender: true：浏览器刚渲染完元素，GSAP 就立刻把起始值（比如 opacity: 0）强行写进内联样式，造成视觉闪动。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：显式加
immediateRender: false，让动画等到真正播放时才读取当前状态 - 更推荐用
gsap.fromTo()替代，例如gsap.fromTo(".logo", { opacity: 0 }, { opacity: 1, duration: 0.6 })，语义清晰、无歧义 - 所有
from类方法（from、staggerFrom）都默认开启immediateRender，这点容易被忽略
动画参数改着改着就失效，哪里出问题？
GSAP 的配置对象（vars）里，有些字段名看着像 CSS，实际是简写映射，拼错或类型不对就静默失败：
-
x/y/rotation是 transform 简写，支持字符串如x: "+=100"或x: "40vw"，但不能写成transform: "translateX(100px)" -
ease必须是字符串，如"power2.out"或"bounce"，传函数或数字会直接忽略 - 颜色类属性（
backgroundColor、color）支持十六进制、rgb、hsl，但不支持 CSS 变量名（如--primary）——要动画 CSS 变量得用gsap.set()配合getProperty
真正难的不是写第一行 gsap.to()，而是理解它不依赖 CSS 渲染流，而是接管属性插值全过程——这意味着你得主动管理初始状态、避免样式覆盖、留意单位与类型，否则动画看起来就像“随机生效”。
