GSAP 动画怎么写：10 个常用效果拆解 + 免费模板

GSAP 官网文档很好，但真做项目时，每个效果都要从零拼。下面是 10 个最常用的效果，按使用频率排，每个讲清实现要点，并标注现成模板在哪——不想自己写的直接下模板。

一、文字逐行揭示（Line Reveal）

标题一行行从遮罩里浮出来。做法：每行包一层 overflow:hidden 的容器，内层 translateY(110%) 初始状态，GSAP 依次 tween 到 0。注意 GSAP 的 yPercent 和 CSS 的 translateY 别混用，会叠加出 bug（我踩过，元素永久下沉一行，解法是动画前先清 transform）。

二、滚动触发（ScrollTrigger）

元素滚到视口才动。ScrollTrigger 插件一句话绑定。获奖站的滚动叙事基本都是它的 scrub 模式：动画进度和滚动进度 1:1 绑定。

三、视差滚动

背景比前景滚得慢。给每层设不同的 y 位移倍率即可，GSAP 里就是给每个元素单独的 scrollTrigger + 不同速度值。

四、磁吸按钮（Magnetic Button）

鼠标靠近时按钮被“吸”过去。监听 mousemove，算距离，按比例位移；离开时 elastic 回弹。这个效果在 Awwwards 站上出现率极高。

五、图片滚动缩放

图片在滚动中从 0.8 放大到 1.15，同时外层容器裁剪。scale + overflow hidden 的组合，电商产品页常用。

六到十：横向滚动、数字计数、预加载进度、页面转场、鼠标跟随

• ·横向滚动：纵向 scroll 转横向 translate，pin 住容器算总位移
• ·数字计数：tween 一个对象属性，onUpdate 写回文本
• ·预加载进度：假进度 + 真实资源加载双保险，防卡死
• ·页面转场：FLIP 思想，先记录状态、再跳转、最后补间
• ·鼠标跟随：quickTo() 是 GSAP 专为这个出的 API，比手动 lerp 省事

GSAP 现在是免费的（Webflow 收购后全免费，包括以前收费的插件），该用就用。效果别贪多，一个页面一个核心动效，其余微交互点缀，这是获奖站和业余站最大的区别。