スタガーアニメーション
Stagger Animation
別名: 時間差アニメーション別名: カスケードアニメーション
ライブデモ
説明
一言で説明
複数の要素に少しずつ時間差（ディレイ）をつけて順番にアニメーションさせる手法。一度に全部動かすより自然でリズミカルな印象を与える。
いつ使う？
カードリスト、ナビゲーションメニュー、ギャラリーなど複数の要素をまとめて表示する際に、単調さを避けてリズム感を出したいとき。
💡 日常の言い方
「カードがパラパラっと少しずつ時間をずらして順番に出てくるアニメーション」
似ている用語との違い
スタガーアニメーション vs スクロールアニメーション
スクロールアニメーションは『スクロール』をトリガーにして要素を表示する。スタガーアニメーションはトリガーに関係なく、要素ごとにディレイをずらす『表現手法』。組み合わせて使うことが多い。
AIへの指示例
カード一覧を表示するとき、各カードを100msずつずらして順番にフェードインさせて。Framer Motionのstaggerを使って実装して。