LottieFiles
Interactive Multi-Card Digital Wallet
0:000:00
ステートマシン

無料Interactive Multi-Card Digital Walletアニメーション

This animation shows how a single wallet can hold and manage multiple payment cards — Visa, Stripe, and Discover — in one place. Built with LottieFiles State Machines, it reacts to user actions: In idle mode, all cards move in a soft loop animation. When a user hovers over a card, it rises above the others, and the wallet balance switches from the total wallet balance to that card’s individual balance. Hovering out resets the animation back to the total balance. It’s a great example of how interactive motion design can make fintech experiences more engaging and user-friendly.

This animation shows how a single wallet can hold and manage multiple payment cards — Visa, Stripe, and Discover — in one place. Built with LottieFiles State Machines, it reacts to user actions: In idle mode, all cards move in a soft loop animation. When a user hovers over a card, it rises above the others, and the wallet balance switches from the total wallet balance to that card’s individual balance. Hovering out resets the animation back to the total balance. It’s a great example of how interactive motion design can make fintech experiences more engaging and user-friendly.

  • 最適化 dotLottie推奨
    18.9 KB

    テーマ、ステートマシン、インタラクティブ機能に対応した、最小ファイルサイズ。

    Lottie JSON より 86% 小さい
  • dotLottie
    20.7 KB

    テーマ設定とステートマシンに対応した、圧縮された Lottie アニメーション。

  • 最適化 Lottie JSON
    116.7 KB

    標準の Lottie に対応した、より高速に読み込める最適化済み JSON 形式。

    Lottie JSON より 16% 小さい
  • Lottie JSON
    139.3 KB

    幅広いツールやプラットフォームと互換性のある標準 Lottie アニメーション形式。

Other export formats

インタラクションとプラグイン

すべて表示
figma
after-effects
framer
canva
webflow
wix

Lottieシンプルライセンスの下で無料で使用可能