mcpField
L
lists-grids

lists-grids

github.com/dylantarreデザイン・UI132502 回インストール43 週間前に更新
リポジトリ

lists-grids について

リストやグリッドにディズニーの原則を応用する、インターフェースデザイナー向けのアニメーションスキルです。項目の出入りや絞り込み、並べ替えについて、状態設計、時間差、軌道、間隔、CSS実装を解説します。

主な機能

  1. 01項目の表示・退出・並べ替え
  2. 02絞り込みと時間差表示
  3. 03アニメーション状態の設計
  4. 04CSSプロパティと実装例

活用シーン

  1. 01リスト項目の並べ替え
  2. 02グリッドの絞り込み結果変更
  3. 03リスト項目の順次表示
  4. 04項目ドラッグ時の視覚的フィードバック

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill lists-grids

インストール後、Claude Code で/lists-gridsを入力して読み込まれたか確認します。

詳細

リストとグリッドのアニメーション原則

ディズニーの12原則をリストやグリッドに適用し、滑らかで整然とした動きを実現します。

リストとグリッドに適用する原則

1. つぶしと伸ばし

リスト項目をドラッグして並べ替える際に、項目をわずかに圧縮します。グリッド項目は、フィルター適用時に空間を埋めるように拡大できます。

2. 予備動作

リストを並べ替える前に、項目を短時間圧縮します。フィルターによって項目を削除する前に、項目をわずかに縮小できます。変化への備えになります。

3. 演出

ドラッグ中の項目をほかの項目より前面に浮かせます（z-index ＋ 影）。フィルター適用後の結果を強調表示し、ほかの項目をフェードアウトさせます。関連する項目に視線を誘導します。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

「表示開始」「静止」「並べ替え」「非表示」の状態を定義します。予測可能で制御しやすいリストアニメーションには、ポーズ・トゥ・ポーズを使用します。

5. 後追いとオーバーラッピング・アクション

項目の表示をずらします。最初の項目が先行し、ほかの項目が続きます（30〜50msの遅延）。項目内のコンテンツは、項目のコンテナーより遅れて動きます。

6. イーズインとイーズアウト

項目の表示にはease-out、非表示にはease-in、並べ替えにはease-in-outを使用します。表示タイミングのずれによる動きは、機械的ではなく波のように感じられるものにします。

7. アーク

項目の並べ替えでは、直線ではなく曲線の軌道に沿って動かします。グリッドを入れ替える動きに個性と自然な印象が加わります。

8. 副次的動作

項目が移動する間（主動作）にプレースホルダーを表示し（副次的動作）、ほかの項目も移動させます（三次的動作）。動き全体を調和させます。

9. タイミング
  • 項目ごとの表示遅延：30〜75ms
  • 項目の表示：200〜300ms
  • 項目の非表示：150〜200ms
  • 並べ替え：250〜350ms
  • フィルター適用時の入れ替え：300〜400ms
  • 表示タイミングのずれの合計上限：500〜800ms
10. 誇張

フィルターの切り替えをドラマチックにするため、削除前に項目を0まで縮小できます。新しい項目を配置位置からわずかに行き過ぎるように動かすこともできます。並べ替えを目でわかるようにします。

11. 立体感のある描画

アニメーション中も一貫した間隔を保ちます。グリッドの間隔は均一に保ちます。変形中も項目の縦横比を維持します。

12. 魅力

滑らかなリストアニメーションは、洗練された印象を与えます。不自然な並べ替えは、壊れているように感じられます。順番をずらした表示は、自然に注意を引きます。ユーザーは品質に気づきます。

CSS の実装

.list-item {
  animation: itemEnter 250ms ease-out backwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* continue pattern */

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-item {
  transition: transform 300ms ease-in-out,
              opacity 200ms ease-out;
}

主なプロパティ

  • transform：移動、拡大・縮小
  • opacity：表示・非表示
  • animation-delay：表示タイミングのずれ
  • grid-template：レイアウトの変化
  • order：並べ替え

コメント

Markdown 対応