北京
我做过足够多的动画作品集网站和营销落地页，现在基本能在滚动的前三秒判断出：这个站是真正懂滚动动画的人做的，还是照着GSAP教程抄完就交差的。
说实话，有很长一段时间，我是后者。
第一次尝试复刻那种Awwwards风格的首屏区块——文字随滚动淡入滑动，整个页面感觉丝滑流畅——我几乎是从教程里原封不动地复制了GSAP代码。同样的触发器，同样的缓动函数，所有东西都一样。在我的笔记本上，用触控板看，效果很好，我甚至有点得意。然后我把它放到客户的Windows机器上，用普通鼠标一滚——画面像在抽搐。卡顿、跳帧，动画跟我做的完全是两回事。
那一刻我意识到，问题从来不在动画本身。问题在于动画读取的那个东西。
那个东西叫滚动。而浏览器的原生滚动，说实话，挺乱的。
为什么原生滚动会毁掉你的动画
有个部分，所有GSAP演示教程都不会跟你讲清楚：当你滚动一个普通网页时，浏览器给你的并不是平滑连续的滚动位置流。它给的是离散的、一跳一跳的滚动位置。跳的幅度取决于设备、输入方式、浏览器，甚至操作系统。Mac上的触控板，跟Windows上的鼠标滚轮行为不一样，跟触摸屏又不一样。
想想ScrollTrigger在底层到底在干什么。它一直在读取你的滚动位置，然后把它映射成动画进度。如果滚动位置本身是跳跃的、不一致的，那不管你动画代码写得多好，输出都会继承同样的跳跃感。你可以调出全世界最完美的缓动曲线，照样没用——因为喂给它的输入本身就是不稳定的。
这就是为什么固定定位区块会跳变而不是平滑过渡，为什么视差效果在你机器上很好、在客户笔记本上却一顿一顿，为什么有时候动画感觉跑得比滚动快、有时候又像在拖后腿。这几乎从来不是GSAP的问题，是滚动的问题。
想通这一点之后，一切都对上了。那些有流畅感的网站，GSAP代码并没有玩出什么花来。它们只是对着另一种滚动在做动画——一个平滑的、虚拟的滚动层，而不是浏览器原生滚动。这就是Lenis登场的地方。
Lenis到底在做什么
Lenis是一个平滑滚动库，但这么叫它有点低估了它真正干的事。它实际做的是拦截来自鼠标、触控板或触摸的原生滚动输入，不直接应用到页面上，而是把它插值成一个平滑连续的滚动流，再喂给ScrollTrigger。动画不再读取浏览器的原始滚动位置，而是读取这个被平滑过的虚拟滚动层。
结果就是，动画的每一帧都基于稳定的输入，而不是一堆离散的跳变。同样的GSAP代码，在Lenis的滚动层上跑，效果完全不同——那种流畅的感觉，就是这么来的。
这个组合拳（GSAP加Lenis）几乎成了所有高端滚动体验的事实标准。不是因为它花哨，而是因为它解决了根本问题：让动画的输入源变得稳定。
如果你还在对着原生滚动调GSAP参数，花几个小时去修那些永远修不完的卡顿，问题可能根本不在你的动画代码里。换一个滚动层，可能比调十遍缓动曲线都管用。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
