GSAP是最可靠的JavaScript动画方案之一，支持直接操作CSS/SVG属性、高精度且兼容性好；引入方式依项目类型而异：CDN用于纯HTML，npm+import用于Webpack/Vite，ESM可直接从Skypack导入。
GSAP 能直接操作 DOM 元素的 CSS 属性和 SVG 属性，不依赖 requestAnimationFrame 手写逻辑，动画精度高、兼容性好，是目前最可靠的 JavaScript 动画方案之一。
怎么引入 GSAP（CDN / npm / ESM）
项目类型决定引入方式，选错会导致 gsap is not defined 或模块解析失败：
- 纯 HTML 页面：用官方 CDN，加在
或前，推荐https://cdn.jsdelivr.net/npm/gsap@3.12.5/index.js（带版本号防缓存失效） - Webpack/Vite 项目：运行
npm install gsap，然后在 JS 文件里写import { gsap } from "gsap" - 使用 ES 模块但不想打包：可用
import { gsap } from "https://cdn.skypack.dev/gsap@3"（注意浏览器需支持原生 ESM）
别直接下载 .js 文件丢进 script 标签又不加 type="module"，否则 import 语法会报错。
如何用 gsap.to() 实现基础位移动画
gsap.to() 是最常用方法，控制元素“变到某个状态”，不是“从某处开始动”——初学者常误以为它等同于 CSS 的 transition，其实它是独立的时间轴驱动器：
立即学习“前端免费学习笔记（深入）”；
- 第一个参数是目标元素，支持 CSS 选择器字符串（如
".box"）、DOM 节点、NodeList、甚至数组 - 第二个参数是配置对象：
{ x: 100, duration: 0.5, ease: "power2.out" }，其中x是 transform X 位移，不是 left - 不要混用
left和x：用left触发重排，性能差；x走合成层，GPU 加速 - 默认 duration 是 0.5 秒，设成
0会跳变（相当于element.style.transform = "translateX(100px)"）
gsap.to(".box", { x: 200, y: 50, rotation: 15, duration: 0.8 });
为什么 gsap.from() 和 gsap.fromTo() 容易用错
gsap.from() 的行为反直觉：它让元素“从某个状态开始，动到当前样式”，不是“从当前样式动到某个状态”。比如页面加载时元素已显示，gsap.from(".logo", { opacity: 0 }) 会让 logo 突然闪一下再淡入——因为它的起点是 opacity: 0，终点是元素当前的 opacity（通常是 1），但初始渲染时浏览器已经画出来了。
- 解决办法：加
immediateRender: false，让动画真正延迟到播放时才读取当前值 -
gsap.fromTo()更明确：必须同时传入起始和结束值，比如{ from: { scale: 0 }, to: { scale: 1 } } - 所有
from类方法默认immediateRender: true，这是性能优化，但对视觉调试不友好
gsap.from(".item", { opacity: 0, y: -20, duration: 0.6, immediateRender: false });
Timeline 控制多个动画的先后与重叠
单个 gsap.to() 只能管一个片段，真实页面需要序列、并行、延迟、回调。这时必须用 gsap.timeline()：
- 返回一个时间轴实例，可链式调用
.to()/.from()/.staggerTo() - 每个方法的第三个参数是位置标记（position parameter），如
"+=0.2"表示上一个动画结束后延后 0.2 秒开始，" 表示与上一个动画重叠 - 别漏掉
tl.pause()或tl.play()：timeline 默认自动播放，想手动控制得先暂停 -
staggerTo()的stagger值不是总时长，是相邻元素之间的间隔，比如 5 个元素 stagger 0.1，总耗时约 0.4 秒
const tl = gsap.timeline();
tl.from(".header", { y: -50, opacity: 0 })
.from(".nav li", { y: 20, opacity: 0, stagger: 0.1 }, "<")
.to(".hero", { scale: 1.05, duration: 1.5 }, "-=1");
GSAP 的核心在于时间轴抽象和属性插值精度，而不是语法糖。很多人卡在“动不起来”，其实是 selector 写错、CSS transform 冲突、或 timeline 位置参数没理解清楚——这些细节比学多少 easing 函数都关键。
