GSAP是专为高性能、可控制、可中断的JavaScript动画设计的引擎，直接操作内联样式或SVG属性，支持逐帧控制与实时调度；而CSS动画和Web Animations API依赖浏览器渲染机制，缺乏运行时干预能力。
GSAP 是什么，它和 CSS 动画、Web Animations API 有什么区别
GSAP 不是“另一个动画库”，而是专为高性能、可控制、可中断的 JavaScript 动画设计的引擎。它不依赖 CSS transition 或 @keyframes，而是直接操作 DOM 元素的内联样式（或 CSS 变量、SVG 属性、甚至自定义对象），因此能精确控制每一帧、随时暂停/倒放/跳转时间点，且不受浏览器渲染线程阻塞影响。
常见误判是“GSAP 就是补间动画”，其实它更接近一个时间轴调度器 + 属性插值器：你告诉它“在 2 秒内把 opacity 从 0 变到 1”，它内部用 requestAnimationFrame 精确计算每帧值并写入；而 CSS 动画一旦触发就无法中途修改目标值，也无法获取当前播放进度。
如何加载 GSAP 并让第一个动画跑起来
最稳妥的方式是通过 CDN 引入核心模块（gsap）和常用插件（如 ScrollTrigger、TextPlugin 需单独引入）：
然后用 gsap.to() 启动第一个动画 —— 注意它默认立即执行，不需要手动调用 .play()：
立即学习“前端免费学习笔记（深入）”；
gsap.to(".box", {
duration: 1.5,
x: 200,
rotation: 360,
ease: "power2.out"
});
-
duration单位是秒（不是毫秒），这是 GSAP v3 的统一约定 -
x和rotation是简写属性，底层自动映射为transform: translateX(200px) rotate(360deg) -
ease值必须是字符串，如"power2.out"，不能传函数（除非用CustomEase）
为什么动画没反应？常见初始化与作用域问题
90% 的“动画不动”问题出在 DOM 加载时机或选择器错误：
- 脚本放在
里但没加defer，导致document.querySelector(".box")返回null - 用
gsap.from()时忘了设置初始状态（比如元素本来就在屏幕外，又设opacity: 0，看起来像没动） - 多个动画同时作用于同一属性（如两个
to()都改y），后触发的会覆盖前一个的缓动逻辑 - 使用了 SVG 元素但没引入
SVGPlugin（v3.12+ 已内置，旧版需手动加载）
调试建议：在动画语句后加 console.log(gsap.utils.toArray(".box"))，确认选中了预期元素；再用 gsap.getProperty(".box", "x") 查看当前值。
如何实现滚动触发动画（ScrollTrigger）
ScrollTrigger 是 GSAP 最常用的插件，但它不是开箱即用的 —— 必须显式注册并确保 DOM 已就绪：
-
start: "top 80%"表示当元素顶部到达视口 80% 位置时开始动画（不是“滚动到元素顶部”） -
toggleActions控制进入/离开时的行为："play none none reverse"意味着只在进入时播放，离开时不重置 - 如果页面有动态内容（如 AJAX 加载），需在新内容插入后调用
ScrollTrigger.refresh()
注意：ScrollTrigger 默认启用性能优化（fastScrollEnd: true），可能导致快速滚动时动画跳帧；若需逐帧响应，设 fastScrollEnd: false，但会增加 CPU 负担。
GSAP 的复杂性不在语法，而在时间轴嵌套、插件协同和性能取舍。比如 stagger 参数看似简单，但配合 repeat 和 yoyo 时，每个子动画的起始时间点会受父级 timeline 影响；而 ScrollTrigger 的 scrub 模式虽然顺滑，却会让动画完全绑定滚动位置，失去独立控制能力 —— 这些细节不踩一遍坑很难真正掌握。
