• Y AnimationPlayground
研究工作台
  • 实验总览
    • CSS + SVG
    • GSAP
    • Motion
    • 动画曲线 Studio
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

GSAP

v0.3 参考实现

研究时间轴编排、精确定位、缓动与 SVG 动效。

对比运行时
GSAP标签化时间轴懒加载约 27 kB gzip

同一个 7.2 秒产品叙事 · 完全一致的场景契约

准备中
0%
0.0s /7.2s
Live signal / 08:42

From scattered activity to a confident next move.

The same product narrative is choreographed by three runtimes. Only the motion engine changes.

Activation

+18%

Intent rising

Retention

92%

Pattern stable

Next move

Scale

Signal confirmed

Signal confidenceLast 24h

Decision ready

Scale the guided path.

  1. 01Collect
  2. 02Resolve
  3. 03Decide

主时间轴

标签、偏移与嵌套时序让整套编排保持可见、可定位。

精确播放控制

定位、暂停、反向、重播和速度都是一等控制能力。

DOM + SVG 协同编排

一条时间轴协调文本、卡片与矢量信号几何。

时间轴地图
语义化标签让每个编排阶段都能被精确定位,同时交错细节继续依附于主时间轴。
  1. 0.00s01

    collect

    叙事内容揭示

  2. 2.70s02

    resolve

    SVG 信号绘制

  3. 4.75s03

    decide

    决策信息交接

实验结论

当动画是精心创作的编排,而且时间轴本身就是作品核心时,再升级到 GSAP。标签和确定性的播放控制让高密度、反复修改的编排更容易理解;对应依赖仍然隔离在当前路由。

适合使用

  • 大量重叠阶段需要命名提示点、拖动定位、反向播放或反复编辑。
  • DOM、SVG 以及未来的 Canvas 图层必须服从同一个明确时钟。

不适合使用

  • 动画主要是对 React 布局或组件挂载状态的直接响应。
  • 少量浏览器原生过渡已经能表达相同关系。