Lottie Preview
Preview and inspect Lottie animation files instantly.
Drag and drop your Lottie file here
or
Supports .json and .lottie files
Your files are processed locally in your browser. Nothing is uploaded or saved to any server.
Lottie files are the go-to format for lightweight web animations, but previewing them has always been a pain. You can't just double-click a JSON file to see the animation. You need a player, a browser extension, or an online tool that's usually cluttered with ads.
This Lottie Preview tool lets you drop in any .json or .lottie file and see it play instantly. No uploads to third-party servers, no account required, everything runs in your browser.
You can control playback speed, step through frames, toggle between light and dark backgrounds to check transparency, and inspect the animation metadata (frame rate, dimensions, duration, layer count). It supports both standard Lottie JSON files and the newer compressed .lottie format.
Whether you're a motion designer checking Bodymovin exports, a developer integrating animations into a React or Next.js project, or a product designer reviewing deliverables, this tool saves you the hassle of setting up a local player every time you need to preview a file.
Built by a motion designer who got tired of the existing options.
Why Lottie?
Lottie is the modern standard for lightweight, scalable, interactive animations on the web and mobile.
Tiny File Sizes
A typical 5-second animation weighs 3 MB as a GIF, 750 KB as MP4, and just 80 KB as a Lottie file. That's up to 37x smaller. Lottie files are JSON, so they compress well and load fast on any connection.
5-second animation
True Transparency
MP4 doesn't support transparency at all. GIF does, but with jagged 1-bit alpha edges. Lottie renders with full alpha transparency at any resolution, making it perfect for overlays, UI elements, and anything that needs to sit on top of other content.
MP4
GIF
Lottie
Interactive by Nature
Unlike video files, Lottie animations are code-controllable. Play on scroll, pause on hover, change direction on click. You can even swap colors, adjust speed, and control individual layers programmatically. It's animation that responds to your users.
// Control with code
anim.play()
anim.setSpeed(2)
anim.setDirection(-1)
anim.goToAndStop(30, true)
// React to events
el.addEventListener('hover', () => {
anim.playSegments([0, 60])
})Works Everywhere
Lottie has native libraries for web (lottie-web), iOS (lottie-ios), Android (lottie-android), and React Native. One animation file, every platform. No re-rendering, no format conversion, no quality loss.
Want the full story?
Read the complete guide covering how to create, optimize, and implement Lottie files in your projects.
Read the Full GuideLet's talk
Available for product videos, animation systems, creative direction, and workshops.