はじめに
自分用メモ。
カードは並んだ瞬間の印象と、触ったときの反応を同じテンションで設計しない方が整理しやすい。登場の動きと操作の動きを分ける。
このサンプルでは、最初はスタッガーでリズムを作って、操作中はマグネットホバーで返す構成。一覧の見え方と触感の役割分担として覚えておく。
組み合わせのポイント
- 最初はスタッガーで順番に見せて、一覧全体に読み始めるリズムをつくる
- hover 中はポインタに対して少しだけ傾けて、触っている感覚を返す
- 各カードの反応量に差をつけすぎず、一覧としてのまとまりを崩さない
- hover 解除は急停止させず、少し余韻を残して自然に戻す
- 影や余白の設計も合わせて見直し、動きだけに頼らない印象づくりをする
実装のポイント
- 初期表示のスタッガーと hover 中の磁力処理を分けて、それぞれ別責務で持つ
- hover ではカード中心からの差分を使い、回転量と移動量を小さく制御する
- 解除時は
gsap.to()で初期状態へ戻し、次のホバーまで残さない - カード一覧は同じクラス構造を保って、登場時も操作時もまとめて扱えるようにする
まとめ
覚えておくのは、カード演出は役割を分けるだけでかなり整理しやすいということ。登場は一覧の印象づくり、hover は触感づくり、と切り分ける。