Masonry / Grid Shuffle (メイソンリー/グリッドシャッフル)
別名 Isotope filter, Filterable grid animation
絞り込みや並べ替えをすると、グリッドのタイルが並び替わったり、フェードアウトしたり、新しい位置へスライドしたりします。
使いどころ
ポートフォリオの絞り込み、ギャラリー
バリエーション
- filter
- sort
- shuffle
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にメイソンリー/グリッドシャッフル(Masonry / Grid Shuffle)の効果を追加してください。フィルタリング可能なグリッドアニメーション(filterable grid animation)とも呼ばれます。
絞り込みをかけると、条件に合わなくなったタイルはその場で縮みながらフェードアウトし、残ったタイルは新しい位置へなめらかにスライドするようにしてください。絞り込みを解除すると逆再生です。
グリッドの高さが変わる間も周りのページががたつかないようにし、フィルターの操作部分はどれが選択中かを伝える本物のボタンにしてください。似ているモーション
- A
- B
- C
- D
- E
- F
クリックしてください
FLIP Layout Animation (FLIPレイアウトアニメーション)
別名 Layout animation, First-Last-Invert-Play
レイアウトが変わったあと、要素が新しい位置と大きさへなめらかに移動します。
使いどころ
絞り込みで変わるグリッド、並びが変わるリスト
[適用する場所]にFLIPレイアウトアニメーション(FLIP Layout Animation)を追加してください。レイアウトアニメーション(layout animation)、First-Last-Invert-Playとも呼ばれます。
レイアウトが変わったら、各要素がぱっと飛ぶのではなく元の位置から新しい位置へすべるように移動し、最初は速く、最後はやさしく収まるようにしてください。
毎フレームでレイアウトの再計算が起きないよう transform だけでアニメーションし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに新しいレイアウトに切り替えてください。- A
- B
- C
- D
クリックしてください
List Item Enter/Exit (リストアイテムエンター/イグジット)
別名 AnimatePresence, TransitionGroup, Animated list
項目は追加されるとフェードしながらスライドして入り、削除されるとアニメーションで消え、隣の項目がすき間を詰めます。
使いどころ
ToDoリスト、通知、カートの商品
[適用する場所]にリストアイテムエンター/イグジット(List Item Enter/Exit)のアニメーションを追加してください。アニメーテッドリスト(animated list)とも呼ばれます。
新しい項目はまず自分の場所を空けてから、フェードしながらスライドして入るようにしてください。削除する項目はまずフェードアウトしてから縮み、隣の項目がなめらかにすき間を詰めます。
削除する項目は退場が終わるまでその場に残し、項目の追加や削除でリストががたつかないようにしてください。- A
- B
- C
- D
ドラッグしてください
Drag-to-Reorder List (ドラッグ並べ替えリスト)
別名 Reorder, Sortable list
項目をドラッグすると、ほかの項目がすっとよけて新しい順番に落ち着きます。
使いどころ
かんばん、並べ替えできる設定、プレイリスト
[適用する場所]にドラッグ並べ替えリスト(Drag-to-Reorder List)を追加してください。ソータブルリスト(sortable list)とも呼ばれます。
ドラッグ中の項目はポインターに直接付いて少し浮き上がり、ほかの項目はなめらかにスライドしてよけるようにしてください。離したら最寄りの位置にすばやく収まります。
マウスだけでなくタッチにも対応し、キーボードで項目を移動できる方法も用意して、新しい位置をスクリーンリーダーに読み上げさせてください。Component & Layoutのほかのモーション
A
Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。A
クリックしてください
Popover / Dropdown Open (ポップオーバー/ドロップダウンオープン)
別名 Menu pop, Popover pop-in, Dropdown scale-fade
フローティングメニューが、トリガーのある位置から拡大しながらフェードインします。
使いどころ
ドロップダウンメニュー、ポップオーバー、選択リスト
[適用する場所]にポップオーバー/ドロップダウンオープン(Popover / Dropdown Open)のアニメーションを追加してください。メニューポップ(menu pop)、ドロップダウンスケールフェード(dropdown scale-fade)とも呼ばれます。
メニューはトリガー横の角から少し拡大しながらフェードインし、素早くキレよく開いて、閉じるときは少し速めにフェードアウトさせてください。
トリガーに固定したまま表示し、Escape キーや外側のクリックで閉じられるようにして、開いている状態をトリガー側でスクリーンリーダーに伝えてください。ACB
クリックしてください
Shared Layout Animation (シェアードレイアウトアニメーション)
別名 layoutId, Shared element (in-page)
要素が、別の位置にある対応する要素へ移動しながらサイズを変え、同じ1つの要素のように見えます。
使いどころ
選択中のハイライト、サムネイルから拡大表示
[適用する場所]にシェアードレイアウトアニメーション(Shared Layout Animation)を追加してください。ページ内の共有要素(in-page shared element)とも呼ばれます。
選択が変わったら、要素が元の位置から新しい位置へなめらかに移動しながらサイズを変え、やわらかく収まるようにして、2つではなく1つの物に見えるようにしてください。
同時に表示するのは常に1つだけにし、移動中に周りのレイアウトがずれないようにしてください。