Lottie JSON Preview
Preview Lottie animations directly in VS Code
✨ Features
| Feature |
Description |
| 🎬 Auto Preview |
Opens split-view preview automatically when you open a Lottie JSON |
| ▶️ Playback Controls |
Play, pause, and control animation speed |
| 🔁 Loop Toggle |
Enable or disable looping |
| ⚡ Speed Control |
Adjust speed: 0.25x, 0.5x, 0.75x, 1x, 2x, 5x, 10x |
| 📊 Timeline |
Interactive progress bar with frame counter |
| 🔍 Zoom Options |
Fit to view, 100%, 150%, 200% + mouse wheel zoom |
| 🖱️ Pan & Zoom |
Drag to pan, scroll to zoom freely |
| 🎨 Background Modes |
Transparent (checkered), Light, Dark |
| 💾 Live Reload |
Preview updates as you edit and save |
🚀 Quick Start
- Install the extension from VS Code Marketplace
- Open any Lottie JSON file (
.json)
- Preview opens automatically in a split view
That's it! No configuration needed.
📸 Screenshots
🎮 Controls
The control bar at the bottom provides quick access to all features:
- Timeline — Click anywhere to seek; shows current frame / total frames
- ▶️ / ⏸ — Play or pause the animation
- 🔁 — Toggle loop on/off
- Speed — Select 0.25x, 0.5x, 0.75x, 1x, 2x, 5x, or 10x playback
- Zoom — Fit to container or scale (preset)
- BG — Switch background: Transparent, Light, Dark
Mouse controls in preview area:
- Scroll — Zoom in/out freely
- Drag — Pan around the animation
🔧 Commands
| Command |
Description |
Lottie: Open Preview |
Manually open preview for current file |
Access via Command Palette: Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux)
📋 Requirements
- VS Code 1.85.0 or higher
- Works with any valid Lottie JSON file
🤔 FAQ
Why doesn't preview open for my JSON file?
The extension only opens preview for valid Lottie files. A valid Lottie JSON must have:
v (version string)fr (frame rate)ip / op (in/out points)layers (array)
Can I preview .lottie files?
Currently only .json format is supported. Support for .lottie (zipped format) is planned for a future release.
How do I keep the preview visible?
The preview panel stays open as you switch between Lottie files. It automatically updates to show the currently active Lottie file.
📄 License
MIT © yellow10041
Made with ❤️ for the Lottie community
Report Bug
·
Request Feature
| |
