# GSAP 滚动动画，恰到好处

> 让滚动揭示显得高级又不让访客眩晕：作用域、交错、缓动，以及 reduced-motion 契约。
>
> 2026-05-22 — y7.hk

## 品味框架

动画是调味料，不是主菜。每个网站我都遵守三条规则：

- **只动 transform 和 opacity。** 绝不要给 `top`、`left`、`width`、`height` 加动画——它们每一帧都会触发布局。
- **每个区块只用一种入场模式。** `y: 20 → 0` 的上浮加 `stagger: 0.1` 显得精致；五种不同入场就是混乱。
- **尊重 `prefers-reduced-motion`。** 没得商量。

## React 中有作用域、可自动清理的 GSAP

```tsx
useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });
```

`scope` 同时给你选择器作用域**和**自动清理——路由切换时不会有泄漏的 ScrollTrigger。

## 有人味的缓动

| 缓动 | 感觉 |
|------|-----------|
| `power3.out` | 自信地到位 |
| `back.out(1.5)` | 俏皮的弹出 |
| `elastic.out(1, 0.5)` | 一个网站最多用一次 |

弹性回弹是香料罐，不是酱油瓶。