モーダルのアニメーション一覧 | アニモーション

Confetti Celebration Modal

モーダルが開くとCanvas上に紙吹雪が舞うセレブレーションエフェクト。

Spring Bounce Toast

スプリング物理で弾むように出現するトースト通知。

Pixel Dissolve Modal

モーダルがピクセルが集まるように徐々に出現するCanvasエフェクト。

Morph Shape Notification

通知がSVGのモーフィングシェイプで出現する有機的なアニメーション。

Three.js Portal Modal

Three.jsの回転するポータルからモーダルが出現するSFエフェクト。

Blur Glass Drawer

backdrop-filterのブラーとグラスモーフィズムで表示されるサイドドロワー。

Canvas Particles Reveal Modal

パーティクルが集まってモーダルの形を作り出すCanvasエフェクト。

GSAP Flip Card Modal

カードがGSAPでY軸回転しながらモーダルに変身するトランジション。

SVG Curtain Modal

SVGのclipPathでカーテンが開くようにモーダルが現れるエフェクト。

Anime Scale Bounce Modal

anime.jsの弾性イージングでバウンスしながら登場するモーダル。

確認ダイアログ。削除操作の前に表示する用途に。

Full Overlay Nav

全画面オーバーレイのナビゲーションメニュー。

ボトムから現れるCookie同意バナー。

上部からスライドインするアラートバナー。

クリックで開くドロップダウンメニュー。

ホバーで上に表示されるツールチップ。

右からスライドインするドロワーパネル。

Command Palette

Cmd+K 風のコマンドパレットUI。SaaSプロダクトに。

Notification Toast

右下からスライドインするトースト通知。

Blur Backdrop Modal

背景がブラーするモーダル。Apple風の上品な演出。

下からスライドして表示するモーダル。モバイルフレンドリー。

Fade Scale Modal

フェード＋スケールで開閉するモーダル。最も汎用的。

Proバッジ付きのアニメーションはProプランでコードをコピーできます。