# GSAP スクロールアニメーション、上品に

> 高級感はあるのに乗り物酔いさせないスクロールリビール：スコーピング、スタッガー、イージング、そして reduced-motion の約束。
>
> 2026-05-22 — y7.hk

## テイストのフレームワーク

アニメーションは主菜ではなく調味料だ。どのサイトでも守っている3つのルール：

- **transform と opacity だけ。** `top`、`left`、`width`、`height` は絶対にアニメーションさせない——フレームごとにレイアウトを引き起こすから。
- **セクションごとに入場パターンは1つ。** `y: 20 → 0` のフェードアップに `stagger: 0.1` は職人技に見えるが、5種類の入場はただの混乱。
- **`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)` | サイトにつき最大1回 |

弾むバウンスはスパイス瓶であって、ソース瓶ではない。