当我要导出一个15秒的屏幕录制视频作为一个落地页的视频时，文件大小达到3.4 MB。移动端则会被裁剪。使用 prefers-reduced-motion 时，视频仍然可以播放。然而，我无法为主题设置背景图像，也无法在特定场景暂停或在滚动时跳转到特定选项卡。一个视频是被冻结的艺术品。产品是活的。

因此，我删除了MP4文件并以GSAP动画的形式构建了导览。完全是DOM，0个视频文件，压缩后不到40KB。每个元素都是页面上的真实元素，样式使用了与整个网站相同的设计token。

我使用gsap.timeline()，基于label的定位，使用power2.out减速的鼠标光标，点击反馈使用back.out(2.2)过度，卡片错开使用每张卡片旋转偏移，typed text以恒定速度显示，使用autoAlpha进行场景渐变，自动元素从tab顺序中消失。

这篇文章附有两个可以在浏览器中暂停并检查的实时演示。不是录制视频，也不是Lottie，也不是Rive。正在运行的DOM元素。

数学计算：

  • GSAP演示：~40 KB压缩
  • 等效MP4：3.4 MB（85倍重）
  • 等效GIF：10+ MB
  • 视频无法在标记的场景中暂停，无法响应减速运动，无法适应视口

完整的文章附有实时交互演示和代码：https://spanthi.com/blog/gsap-choreography/

生产示例：https://costumary.com