GSAP 实战教程：从零打造惊艳落地页动画

为什么现在是入手 GSAP 的最佳时机

GSAP（GreenSock Animation Platform）是前端开发圈公认的动画神器，但真正深度用过的人才懂它为何值得追捧。本文将通过一个 F1 赛车主题落地页的完整实战，带你系统掌握 GSAP 的核心能力与使用技巧——从基础补间动画到滚动触发、时间轴编排，再到帧率一致的无限滚动。

GSAP 最重要的变化是：它现在完全免费了。在 Webflow 提供资金支持后，过去需要付费的插件（如 ScrollTrigger、SplitText 等）如今全部开放，开发者可以零门槛使用完整能力。

值得了解的是，GSAP 并非新兴技术，而是经历了超过 15 年工程打磨的成熟框架。它诞生于 2008 年，最初以 Flash 动画库的形式出现（ActionScript 版本）。彼时 Adobe Flash 是 Web 富媒体内容的主流载体，GreenSock 团队在这一生态中积累了大量复杂动画序列的工程经验。2010 年前后，随着苹果宣布 iOS 设备不再支持 Flash，加之 HTML5 标准的迅速普及，GSAP 完成了向 JavaScript 生态的平滑迁移，并保留了原有引擎的核心设计哲学。

与浏览器原生 CSS 动画、Web Animations API 相比，GSAP 的核心优势在于其独立的高性能渲染引擎——它绕过了浏览器对 CSS 属性变更的批处理限制，通过 requestAnimationFrame 精确调度每一帧的属性计算，在处理复杂序列动画时性能表现尤为突出。此外，GSAP 在内部对 transform 属性进行了统一管理，避免了多个动画同时修改同一元素 transform 时互相覆盖的经典陷阱。

安装方式非常简单，既可通过 npm install gsap 引入项目，也可直接使用 CDN。在 Astro 项目中，推荐将 GSAP 核心库与插件统一封装到单独文件，方便各组件复用：

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(ScrollTrigger, SplitText);

export { gsap, ScrollTrigger, SplitText };

需要注意：GSAP 核心 tween 功能开箱即用，但插件必须先通过 registerPlugin 注册才能使用。这一设计是有意为之——插件注册机制让打包工具（如 Webpack、Vite）能够进行 Tree Shaking，只将实际使用的插件打包进最终产物，避免引入不必要的体积。

基础动画：from 与 to 的使用哲学

优先用 from，让 CSS 定义终态

GSAP 动画的核心是 tween（补间动画）——这一概念源自传统手绘动画工业。在迪士尼等早期动画工作室中，资深动画师（称为 Key Animator）绘制关键帧（Keyframe），定义角色在关键动作节点的姿态；助理动画师（称为 In-betweener，缩写即 Tweener）则负责填充相邻关键帧之间的过渡帧，使动作看起来连贯流畅。一部经典手绘动画中，关键帧可能仅占全部帧数的 10%～20%，其余均由 In-betweener 手工完成——在鼎盛时期的迪士尼工作室，一部 90 分钟长片往往需要数百名 In-betweener 同时作业。数字动画完整继承了这一范式：开发者只需定义起始状态与结束状态，动画引擎自动计算并渲染所有中间帧，计算机替代了人工 In-betweener 的角色。GSAP 的 from 和 to 方法正是对这一机制的直接抽象，from 往往更直观——在 CSS 中定义好元素最终状态，再告诉 GSAP「从哪里开始」，它会自动计算过渡过程。

以卡片淡入为例：

gsap.from('.driver-card', {
  opacity: 0,
  y: 100,
  duration: 1,
  stagger: 0.5,
  ease: 'power4.out'
});

其中 stagger 是 GSAP 相较于纯 CSS 动画的明显优势——它让多个元素依次错开出现，实现优雅的层叠入场效果。CSS 虽然可以通过 animation-delay 配合 :nth-child 选择器实现类似效果，但需要为每个子元素手动指定延迟值，且当元素数量动态变化时维护成本极高；GSAP 的 stagger 支持对象形式（如 stagger: { each: 0.1, from: 'center' }），可以控制错落方向（从中央向两侧扩散等），灵活度远超 CSS 方案。

用 ScrollTrigger 实现滚动触发动画

浏览器原生提供了 Intersection Observer API 来检测元素进入视口。这一 API 于 2016 年前后进入 Chrome，解决了早期开发者不得不在 scroll 事件回调中频繁调用 getBoundingClientRect()（一个会触发强制同步布局的昂贵操作）的性能痛点。然而 Intersection Observer 本质上是一个「是否可见」的布尔事件系统——它告诉你元素进入或离开视口的瞬间，但无法感知「滚动进度到了 30%」或「元素距离视口顶部还有 200px」这类连续状态。

ScrollTrigger 在 Intersection Observer 思想的基础上构建了完整的滚动动画协调层：支持 scrub（动画进度与滚动位置精确同步，实现视差效果）、pin（滚动时将元素固定在视口中，常用于全屏横向滚动叙事）、snap（滚动吸附到关键节点，防止用户停在尴尬的中间状态）等高级特性，并内置了与 GSAP Timeline 的深度集成。CSS Scroll-driven Animations 规范（2023 年随 Chrome 115 推出）虽然开始补充类似能力，但截至 2024 年底 Safari 支持度仍不完整、Firefox 仅部分支持，ScrollTrigger 目前仍是生产环境的更可靠选择：

gsap.from('.driver-card', {
  opacity: 0,
  y: 100,
  stagger: 0.5,
  scrollTrigger: {
    trigger: '.drivers-grid',
    start: 'top 85%'
  }
});

trigger 指定触发元素，start: 'top 85%' 控制动画在元素顶部到达视口 85% 位置时启动，有效避免用户还没滚动到就已经错过动画。

进阶技巧：独立触发与自定义动画

列表元素各自独立触发

当希望列表中每个元素在各自进入视口时独立触发，而非同时触发，需要用 querySelectorAll 配合 forEach 遍历，并将每个元素自身设为 trigger：

document.querySelectorAll('.car-spec-row').forEach((row) => {
  gsap.from(row, {
    opacity: 0,
    y: 100,
    scrollTrigger: { trigger: row }
  });
});

这类「逐个探头」的入场动画正是好设计的精髓——克制的动效往往比大量同时触发的动画更能吸引注意力。

数字滚动递增动画

对于统计数字从 0 递增到目标值的效果，可通过 gsap.to 配合 onUpdate 回调实时更新 DOM：

document.querySelectorAll('.stat-block-value').forEach((stat) => {
  const target = stat.dataset.target;
  ScrollTrigger.create({
    trigger: stat,
    start: 'top 80%',
    once: true,
    onEnter: () => {
      gsap.to({ val: 0 }, {
        val: target,
        duration: 5,
        ease: 'power4.out',
        onUpdate: function() {
          stat.firstChild.textContent = Math.round(this.targets()[0].val);
        }
      });
    }
  });
});

两个关键细节：once: true 确保动画只播放一次，避免滚回时重复触发；同时需将初始文本内容手动设为 0，防止页面加载时闪现最终数值。

值得注意的是，这里 gsap.to 动画的目标是一个普通 JavaScript 对象 { val: 0 } 而非 DOM 元素——GSAP 能够对任意对象的任意数值属性进行插值。这一特性使它不仅可用于视觉动画，还可驱动音频参数（如 Web Audio API 的 GainNode.gain.value）、物理模拟数值、Three.js 材质属性（如 MeshStandardMaterial.roughness）、WebGL Uniform 变量等各种场景，是区别于其他纯 DOM 动画库的重要能力边界。在此示例中，GSAP 对 val 属性从 0 插值到目标数字，再通过 onUpdate 回调将当前值写入 DOM，体现了这一跨领域插值能力的典型应用。

Timeline 与 SplitText：精细编排动画序列

用 Timeline 控制多元素协同动画

Timeline（时间轴）是 GSAP 协调多个动画的核心工具。如果将每个独立的 gsap.from / gsap.to 调用比作乐器单独演奏，Timeline 就是指挥——它定义了各个动画的入场顺序、重叠关系和整体节奏。Timeline 本身也可以像单个 tween 一样被控制（暂停、倒放、跳转到指定进度），这意味着多个复杂动画序列可以进一步嵌套和组合，构建出电影级的分镜叙事。

通过位置参数可以精确控制动画重叠时序：

const tl = gsap.timeline({ delay: 1.5 });
tl.from('.hero-title', { opacity: 0, duration: 5 })
  .from('.hero-rule', { scaleX: 0, duration: 2 }, '-=4')
  .from('.canvas', { scale: 0, opacity: 0 }, '<')
  .to('nav', { opacity: 1, filter: 'blur(0px)', duration: 1 });

'-=4' 表示提前 4 秒开始（制造重叠），'<' 表示与上一个动画同时开始。位置参数还支持绝对时间（如 2 表示时间轴第 2 秒处）和标签（先用 tl.addLabel('intro') 打标，再用 'intro+=0.5' 引用），使复杂序列的维护更具可读性。这种精细的时间控制正是 Timeline 相较于独立 tween 的核心优势——在需要与产品经理、设计师对齐动画节奏时，Timeline 的可视化时间语义也让沟通成本大幅降低。

SplitText 实现逐字入场动画

SplitText 能将文本拆分为单个字符并分别包裹在独立元素中，从而实现逐字动画效果。在无障碍性处理上，这里有一个微妙但重要的设计：屏幕阅读器（如 VoiceOver、NVDA、JAWS）在解析 DOM 时，若文本被拆分为数十个独立 <span> 标签，会逐一读出每个字符——用户会听到「L... e... w... i... s」而非「Lewis」，造成极差的体验，严重违反 WCAG 2.1 无障碍规范中关于信息可理解性（Understandable）的要求。SplitText 通过在父元素添加 aria-label 属性保留完整文本语义，同时在每个子元素上添加 aria-hidden="true" 使其对辅助技术不可见，精准解决了这一矛盾。此外，遵循 WCAG 2.1 规范 2.3.3 条款，还建议配合 CSS 媒体查询 prefers-reduced-motion: reduce 为偏好减少动画的用户提供静态回退方案——这类用户可能患有前庭功能障碍（Vestibular Disorder），大幅度位移动画会引发恶心、眩晕等身体不适。

const heroText = SplitText.create('.hero-title', { type: 'chars' });
tl.from(heroText.chars, {
  opacity: 0,
  x: 200,
  stagger: 0.05,
  ease: 'elastic.out',
  duration: 1
});

做位移动画时应使用固定像素值（如 x: 200）而非百分比，因为字母宽度不同会导致百分比偏移量错乱。

关于缓动函数的选择：power4.out 是四次多项式缓动，表现为快速启动后逐渐减速，数学上等价于 1 - (1-t)^4，模拟物体受摩擦力减速的自然感；elastic.out 则基于弹簧物理模型（胡克定律的阻尼振动方程），包含超出目标值后回弹的振荡过程，能让文字先冲入再回弹稳定，动感十足。两者的区别直观来说是：power4.out 像汽车刹车，elastic.out 像弹弓射出后的余震。GSAP 官方文档提供了可视化缓动函数调试工具（Ease Visualizer），可以直观预览每种缓动曲线的数学形态并实时调整参数。对于追求极致物理真实感的场景，GSAP 还提供了基于真实弹簧参数（质量 mass、刚度 stiffness、阻尼 damping）配置的工具，让动画行为完全遵循牛顿力学方程。

帧率一致的无限滚动跑马灯

实现可拖拽无限滚动时，核心难点是帧率一致性。现代显示器刷新率差异显著（60Hz、90Hz、120Hz、144Hz 甚至 240Hz），这一问题在游戏开发领域早已是基础常识：若直接按「每帧移动 N 像素」计算，120Hz 显示器用户看到的速度会是 60Hz 用户的两倍，在高刷新率设备（如 iPad Pro 120Hz ProMotion 屏、高端游戏显示器）上动画会失控加速。

游戏引擎普遍采用 deltaTime（帧间隔时间）来解决这一问题：记录每一帧实际耗时（毫秒数），将移动量乘以 deltaTime 而非固定像素值。例如目标速度为「每秒移动 300px」，60fps 时每帧 deltaTime 约 16.67ms，每帧移动 300 × 0.01667 ≈ 5px；120fps 时每帧 deltaTime 约 8.33ms，每帧移动 300 × 0.00833 ≈ 2.5px——两者单位时间位移量完全一致。Unity、Unreal Engine 等主流游戏引擎的教程中，「永远用 deltaTime 乘以速度」是写入规范的第一原则。

GSAP 的 ticker 提供了 deltaRatio 来实现这一归一化机制——它以 60fps 为基准（即 deltaRatio = 1），在 120fps 设备上该值约为 0.5，在 30fps 设备（如性能受限的低端手机）上约为 2，将速度乘以此比值即可获得帧率无关的一致运动：

gsap.ticker.add(() => {
  const dr = gsap.ticker.deltaRatio();
  // 根据 deltaRatio 归一化速度，确保各设备体验一致
});

配合指针事件（pointerdown / pointermove / pointerup）处理抓取、抛掷和松手后的惯性减速——其中惯性减速通常通过每帧将速度乘以一个小于 1 的摩擦系数（如 0.95）来模拟。这一摩擦系数同样需要乘以 deltaRatio 进行帧率归一化：若不做归一化，高刷新率设备会因每帧乘以更多次摩擦系数而减速过快，导致跑马灯在 120Hz 屏幕上抛掷后几乎瞬间停止，而在 30fps 低端设备上又滑行过长——最终实现流畅且跨设备一致的交互体验。

总结：GSAP 值得这份追捧

从这次落地页实战可以看出，GSAP 的吸引力来自多个层面：

• API 直观：熟悉 CSS 属性的开发者几乎零成本上手；
• 能力全面：基础补间、ScrollTrigger 滚动触发、Timeline 时间轴、SplitText 文字拆分、帧率控制，一站式覆盖；
• 注重细节：SplitText 自动处理无障碍性，deltaRatio 解决跨设备帧率问题；
• 完全免费：Webflow 的资助让所有插件向开发者完全开放。

对于希望让静态页面「活起来」的前端开发者而言，现在正是系统学习和拥抱 GSAP 的绝佳时机。

核心要点

核心要点