用 GSAP 做滚动动画最怕的就是在 Mac 触控板上丝滑

很多做前端或者交互的人在用 GSAP 搞 ScrollTrigger 的时候都会踩一个坑：代码写得没问题，缓动函数（Easing）也调到了极致，但在不同设备上跑出来的效果完全不一样。在自己的 MacBook 上看是顶级 Awwwards 水平，结果发给客户看，对方用个普通鼠标滚一下，页面直接跳变，那种顿挫感瞬间让整个网页显得很廉价。

其实这根本不是 GSAP 的锅，而是原生浏览器滚动（Native Scroll）本身就是个烂摊子。浏览器在处理滚动位置时，并不是给你一个连续的流，而是离散的跳跃。Mac 触控板、Windows 鼠标滚轮、手机触摸屏，它们给出的滚动数值频率和幅度完全不同。ScrollTrigger 本质上是在实时读取滚动位置并映射到动画进度上，如果输入源本身就是跳跃的，那么无论你的动画曲线写得多么完美，输出结果依然是掉帧和卡顿。

想要那种“贵气”的丝滑感，不能直接用原生滚动，得在中间加一层虚拟的平滑层。这时候 Lenis 就派上用场了。它不是简单地改变滚动速度，而是拦截原始的滚动输入，将其插值为一个随时间平滑变化的连续值，再把这个平滑后的值交给页面。这样 GSAP 读取到的就是稳定且可预测的数值，动画自然就流畅了。

我现在的项目基本都是 GSAP + Lenis 这种组合，这里分享一套最稳的配置流程，尤其是同步机制这块，很多人直接装了库就跑，结果导致动画和滚动之间有明显的延迟感，那是没做同步。

首先，安装这两个核心依赖：

npm install gsap @studio-freight/lenis

然后，不要直接在全局乱写，建议按照下面的逻辑来初始化。最关键的一点是，你必须在 Lenis 的 requestAnimationFrame 循环里同步 GSAP 的 ScrollTrigger，否则你会发现滚动条在走，但动画在慢半拍地追。

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import Lenis from '@studio-freight/lenis';

gsap.registerPlugin(ScrollTrigger);

// 1. 初始化 Lenis
const lenis = new Lenis({
  duration: 1.2,       // 滚动持续时间，数值越大越丝滑，但太大会像在冰上走
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // 自定义缓动函数
  wheelMultiplier: 1,  // 滚动速度倍数
  touchMultiplier: 2,  // 触摸屏灵敏度
});

![用 GSAP 做滚动动画最怕的就是在 Mac 触控板上丝滑](/uploads/articles/60e5e749860f38de.webp)

// 2. 核心步骤：将 Lenis 的滚动同步给 ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);

// 3. 必须建立一个请求动画帧循环，否则 Lenis 不会工作
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

// 之后再写你的 GSAP 动画，此时的 ScrollTrigger 是基于平滑后的数值
gsap.to(".hero-text", {
  scrollTrigger: {
    trigger: ".hero-section",
    start: "top top",
    end: "bottom top",
    scrub: true, // 此时的 scrub 才会真正丝滑
  },
  opacity: 0,
  y: -100,
});

在这套配置里，有几个细节值得注意：

• 关于 scrub 的取值： 当你用了 Lenis 之后，scrub: true 已经足够流畅。如果你习惯给 scrub 设置一个数字（比如 scrub: 1），这会在 Lenis 的平滑基础上又加了一层延迟，容易导致视觉上的“漂浮感”，建议优先尝试 true。
• 性能开销： Lenis 是基于 JS 模拟的滚动，虽然性能优化得很好，但在极低端设备上仍有压力。如果页面极其复杂，记得给 duration 设一个适中的值，不要追求极致的慢速漂移。
• CSS 配合： 使用 Lenis 时，建议给 html 和 body 设置 height: auto，避免出现双滚动条或者奇怪的布局跳动。

说白了，决定一个网页“高级感”的往往不是动画本身有多复杂，而是这种物理层面的流畅度。把输入源从“跳跃的原生滚动”改为“平滑的虚拟滚动”，你的 GSAP 动画才能真正发挥出应有的质感。