使用Timeline进行精确时间控制：GSAP的Timeline功能可编排多个动画，通过gsap.timeline()创建时间线并用.to()、.from()等方法实现复杂动画序列。
GreenSock（GSAP）是目前最强大、性能最优的JavaScript动画库之一。它不仅支持DOM元素动画，还能处理SVG、Canvas甚至WebGL中的对象。掌握一些高级技巧，能让你在复杂交互动画中游刃有余。
1. 使用Timeline进行精确时间控制
Timeline是GSAP的核心功能之一，它允许你将多个动画按时间轴组织，实现复杂的编排效果。
你可以通过gsap.timeline()创建一个时间线，并使用.to()、.from()、tl.to(element, {x: 100}, "-=0.5")，表示该动画比上一个提前0.5秒开始。
2. 利用Stagger实现批量错位动画
当需要对一组元素做类似但有节奏差的动画时，stagger参数可以极大简化代码。
立即学习“Java免费学习笔记（深入）”；
- gsap.to(".item", {y: -20, stagger: 0.1})：每个元素依次延迟0.1秒执行。
- 支持复杂配置：stagger: {amount: 0.5, from: "center"}，从中间向两边展开动画。
- 与random结合制造自然感：stagger: gsap.utils.random(0.1, 0.3)。
3. 自定义Ease和MotionPath实现真实动效
GSAP内置了上百种缓动函数，还支持创建自定义曲线和路径动画。
- 使用CustomEase.create()绘制贝塞尔曲线：
CustomEase.create("myEase", "M0,0 C0.2,0 0.1,1 1,1")，然后在动画中使用ease: "myEase"。 - 配合MotionPathPlugin让元素沿SVG路径运动：gsap.to(target, {motionPath: "#path", duration: 3})。
- 启用align: "self"使元素自动旋转贴合路径方向。
4. 性能优化与内存管理
在大型项目中，合理管理动画生命周期至关重要。
- 始终保存Timeline引用以便复用或销毁：const tl = gsap.timeline(); tl.kill()释放资源。
- 使用paused: true初始化动画，按需播放。
- 避免频繁创建动画实例，尽量复用或使用.clear()重置Timeline。
- 监听scroll或resize时，使用节流并及时kill无用动画。
基本上就这些。GreenSock的强大在于灵活性和精细控制能力，深入理解Timeline、stagger、ease系统和插件生态，能让你做出媲美原生应用的流畅交互动画。不复杂但容易忽略的是资源清理和性能意识，尤其在单页应用中尤为重要。
