リストとコンテンツ — 要素の「登場」を演出する

音楽のリズムを想像してください。すべての音が同時に鳴ったらノイズです。時間差があるから「流れ」が生まれます。

リストアイテムを一斉に表示するのは「全部同時に鳴らす」ことと同じ。少しずつ時間差をつけると、ユーザーは自然にリストを上から下へ「読む」動線を追います。

一斉表示 vs スタガー

「再生」ボタンを押して比べてみてください。

左右どちらも「▶ 再生」を押して比較。スタガーは「波」でリストを上から読む動線を作る

遅れは小さく（40〜80ms） — 1つ50msの遅れで10アイテムあれば最後は500ms待つことになります。それ以上長くすると「最後のアイテムが遅すぎる」と感じます。

上から下が自然 — 重力の方向と同じ。横に広がるグリッドなら左上から右下への「波」が自然です。

アイテム数に上限を — 10件以上は遅れの間隔を縮めます（50ms → 30ms など）。または最大遅れ時間に上限を設けます。

「▶ 再生」でグリッドカードが左上から右下へ斜めの波のように出現する

グリッドのスタガーは delay = (row + col) * 間隔ms という計算で実現できます。対角線方向に波が広がる「正しい」グリッドのリズムです。

リストにアイテムを追加・削除するとき、「どこに追加/削除されたか」が分かることが重要です。

追加はleft-slideIn、削除はright-slideOut。どこに何が起きたか分かる

追加は「左からスライドイン」、削除は「右へスライドアウト」——方向を決めることで「操作の結果どこに何が起きたか」が視覚的に明確になります。

スクロール連動アニメーション（スクロールするとコンテンツが現れる）の判断基準：

使うと効果的 — ランディングページ、ポートフォリオ、プロモーションページ。ユーザーが「体験」を期待していてコンテンツをゆっくり消費する場合。

使わない方がいい — ブログ記事、ドキュメント、管理画面、フォーム。ユーザーが「作業」をしている場合。スクロールするたびに要素が現れると読む速度が妨げられます。

「スクロールで出現させる」は印象的ですが、ユーザーが「早く情報を得たい」シーンでは逆効果です。