这款Skill让动效改一处不全乱

用 GSAP 时间线编排多步骤动画。

gsap-timeline 是帮助 AI 编排 GSAP 多段动画的 Skill。你描述标题、图片、按钮各自在什么时候出现,它会指导 AI 用时间线组织先后、并行和重叠关系。

最容易返工的写法,是给每个元素分别填一个绝对延迟。开头动画一变长,后面就要重新算。时间线允许把动作写成“接着上一段”“与上一段同时”,也能给关键时刻起名字,让多个元素对齐到同一个节点。

比如产品卡片的进场是一小段,价格和按钮又是一小段,两段可以分别编排,再装进总时间线。调节某段节奏时,相关关系保留在一起,不必散落到各个计时器里。

它也说明了暂停、倒放、跳转到某个进度的控制方式。适合已经在用 GSAP、动效不止一个动作的页面;最终得到的是更容易调整的动画代码,不是独立的视频剪辑软件。

分类:设计创作

来源仓库:greensock/gsap-skills

适合用来做什么

  • 使用 GSAP 时间轴创建一个动画序列。
  • 请用 gsap.timeline() 实现这个关键帧动画。

安装 gsap-timeline

npx skills add https://www.iskills.cc/skills/greensock/gsap-skills/gsap-timeline/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 gsap-timeline 的用途与原始说明

浏览全部 Skill 指南