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

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

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

• transform と opacity だけ。 top、left、width、height は絶対にアニメーションさせない——フレームごとにレイアウトを引き起こすから。
• セクションごとに入場パターンは1つ。 y: 20 → 0 のフェードアップに stagger: 0.1 は職人技に見えるが、5種類の入場はただの混乱。
• prefers-reduced-motion を尊重する。 交渉不可。

Reactでスコープ付き・自動クリーンアップされるGSAP

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回

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