Stagger (スタッガー)
別名 Staggered Animation, Cascade
グループ内の項目が少しずつ遅れて順番に動き、一度に現れるのではなく波のように連なります。
使いどころ
リスト、グリッド、ナビゲーションメニュー、検索結果
バリエーション
- from start
- from center
- from end
- grid
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスタッガー(Stagger)アニメーションを追加してください。スタッガードアニメーション(staggered animation)、カスケード(cascade)とも呼ばれます。
項目が短く均等な間隔で一つずつ順番に浮き上がって現れ、一度にではなく素早い波のように見えるようにしてください。
項目が多くても全体が短く終わるようにし、画面に入ったときに一度だけ再生し、モーションを減らす設定(prefers-reduced-motion)の場合は動きなしで表示してください。似ているモーション
ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。- A
- B
- C
- D
クリックしてください
List Item Enter/Exit (リストアイテムエンター/イグジット)
別名 AnimatePresence, TransitionGroup, Animated list
項目は追加されるとフェードしながらスライドして入り、削除されるとアニメーションで消え、隣の項目がすき間を詰めます。
使いどころ
ToDoリスト、通知、カートの商品
[適用する場所]にリストアイテムエンター/イグジット(List Item Enter/Exit)のアニメーションを追加してください。アニメーテッドリスト(animated list)とも呼ばれます。
新しい項目はまず自分の場所を空けてから、フェードしながらスライドして入るようにしてください。削除する項目はまずフェードアウトしてから縮み、隣の項目がなめらかにすき間を詰めます。
削除する項目は退場が終わるまでその場に残し、項目の追加や削除でリストががたつかないようにしてください。Fade Up (フェードアップ)
別名 Fade In Up, Reveal on Scroll
要素が少し浮き上がりながらフェードインし、所定の位置に落ち着くように見えます。
使いどころ
スクロールで現れるセクション見出し、カード、画像
[適用する場所]にフェードアップ(Fade Up)の登場アニメーションを追加してください。フェードインアップ(fade-in-up)、スクロールリビール(reveal on scroll)とも呼ばれます。
要素が初めて画面に入ったとき、少し浮き上がりながらフェードインするようにしてください。控えめで素早く、弾むような動きは不要です。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。中をスクロールしてください
Scroll-Triggered Animation (スクロールトリガーアニメーション)
別名 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
要素がビューポートに入ったり出たりしたときに、アニメーションが一度再生されます。
使いどころ
フェードインするセクション、遅延表示
[適用する場所]にスクロールトリガーアニメーション(Scroll-Triggered Animation)を追加してください。スクロールリビール(reveal on scroll)、アニメートオンスクロール(animate on scroll)とも呼ばれます。
各要素が画面に入ったときに一度だけ、フェードインしながら下から所定の位置へ上がるようにしてください。スクロール位置には追従させず、独自の素早くなめらかなテンポで再生します。
スクリプトが読み込めなくてもコンテンツが見えるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに表示してください。Entrance & Exitのほかのモーション
A
Swirl In (スワールイン)
別名 Swirl In Forward
要素が一点から回転しながら拡大し、フェードインします。
使いどころ
装飾要素やロゴの登場
[適用する場所]にスワールイン(Swirl In)の登場アニメーションを追加してください。swirl in forward とも呼ばれます。
要素が一点から本来の大きさまで拡大しつつ、一回転を大きく超えて回転しながらフェードインするようにしてください。最初は速く、落ち着くにつれて減速させてください。
グループ全体ではなく1つの要素だけに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。ABCD
Tracking In (トラッキングイン)
別名 Text Tracking In, Letter-spacing In
文字が大きく間隔を空けた薄い状態から始まり、現れながら通常の字間に詰まっていきます。
使いどころ
見出しテキストの登場
[適用する場所]にトラッキングイン(Tracking In)のテキストアニメーションを追加してください。text tracking in、letter-spacing in とも呼ばれます。
文字が大きく間隔を空けた薄い状態から始まり、完全に見えるようになりながら通常の字間まで詰まっていくようにしてください。なめらかに、最後は減速させてください。
字間が変わる間もテキストを中央揃えの1行に保って周りのレイアウトがずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は通常の字間で表示してください。A
Zoom In (ズームイン)
別名 Scale In, Zoom In Up, Zoom In Down
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。
使いどころ
モーダル、画像ライトボックス、ポップオーバー
[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。