Lottie Animation
ロッティー
どんな動き？
Adobe After Effectsで制作したベクターアニメーションを、Bodymovinプラグインを使ってJSON形式に書き出し、lottie-webなどのライブラリでWeb上に再生する技術。軽量なファイルサイズで滑らかな「ぬるぬる動く」アイコンやイラストを実現でき、チェックマークやローディング、オンボーディング画面のマイクロインタラクションとして広く使われている。
よく使う場所
成功メッセージオンボーディングローディングマイクロインタラクションアイコンアニメーション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Load and play a Lottie animation from a JSON file using the lottie-web library (or dotLottie) when the element enters the viewport.Implementation:
Use lottie-web (or dotLottie player) to load and render an After Effects exported JSON animation file.
Trigger:
When the container enters the viewport (Intersection Observer) or on page load.
Configuration:
- container: document.getElementById('lottie-container')
- renderer: 'svg'
- loop: false (or true for looping micro-interactions)
- autoplay: true
- path: 'path/to/animation.json' (replace with your Lottie JSON URL or data object)
Initial state:
Container element rendered in the DOM; animation waiting to trigger.
Animation:
Lottie plays the vector animation from start to finish once triggered.
Final state:
Animation completes and holds on the final frame (or repeats if loop is enabled).
Timing:
duration: dictated by the exported JSON animation (~1–2s). Play once per trigger.実装方法の候補
この動きは以下の技術で実装できます。
lottie-webdotLottieLottieFiles
別名・関連ワード
LottieBodymovin AnimationAE Vector Animation