code-serve
在浏览器中运行的 VS Code，随时随地远程开发。
定位与核心能力
GSAP（GreenSock Animation Platform）是一个面向专业前端开发的 JavaScript 动画库，专注于解决网页中高性能、复杂时序动画的实现问题。它不依赖任何框架，可与 React、Vue、Angular 或原生 JavaScript 项目配合使用。
官网地址：https://gsap.com/
主要特性
1. 高性能渲染
GSAP 直接操作 CSS 属性与 DOM 节点，绕过框架层的重复渲染开销。其核心引擎针对动画帧调度做了深度优化，在低端设备上也能保持稳定的帧率表现。官方提供的数据显示，GSAP 在多数基准测试中的性能优于 CSS Animation 和 WAAPI（Web Animations API）。
2. 时间轴（Timeline）系统
时间轴是 GSAP 区别于其他动画库的关键设计。开发者可以将多个动画编排为有序序列，精确控制每个片段的开始时间、持续时长与重叠关系：
- 支持绝对时间与相对时间定位
- 支持时间轴嵌套，构建复杂动画结构
- 提供 play、pause、reverse、seek 等完整控制接口
3. 丰富的动画属性
GSAP 可对几乎所有数值型 CSS 属性进行插值，包括：
| 类别 | 示例属性 |
|---|---|
| 变换 | x, y, rotation, scale, skew |
| 颜色 | backgroundColor, color, borderColor |
| SVG | strokeDashoffset, fill, cx, cy |
| 自定义 | 任意对象数值属性 |
4. 插件生态
官方提供一系列可选插件，扩展核心功能：
- ScrollTrigger：基于滚动位置的动画触发与联动
- Draggable：拖拽交互支持
- MotionPathPlugin：沿 SVG 路径运动
- SplitText：文本逐字/逐行动画拆分
- MorphSVGPlugin：SVG 形状形变动画（付费）
技术优势
框架无关性意味着同一套动画逻辑可在不同技术栈间复用。GSAP 不修改 DOM 结构，仅通过内联样式驱动动画，对组件生命周期零侵入。
补间引擎的精确性体现在对缓动函数（easing）的完整支持。内置数十种缓动预设，同时允许自定义贝塞尔曲线或步进函数，满足从物理拟真到机械节奏的各类需求。
适用场景
- 品牌官网的滚动叙事型页面
- 数据可视化中的过渡动画
- 游戏界面与 H5 活动页
- 产品交互原型的高保真动效实现
使用要点
- 核心库免费开源，商用无需授权
- 部分高级插件需付费订阅（如 MorphSVG、SplitText）
- 通过 npm 安装：
npm install gsap - CDN 引入可直接使用核心功能
对于需要精细控制动画时序、追求跨浏览器一致性的项目，GSAP 是目前前端领域成熟度最高的解决方案之一。建议从官方文档的入门示例开始，优先掌握 Timeline 与 ScrollTrigger 的组合用法。
