Lottie Frame Inspector
Debug animations frame by frame. Scrub through timeline, inspect layer properties, and export individual frames.
1. Upload your Lottie JSON file
Drag & drop your file here or click to browse
Only .json files (max. 10MB)
Live Preview
Animation Info
FPS
-
Total Frames
-
Duration
-
Layers
Debug Lottie Animations Frame by Frame
Timing issues? Visual glitches? Layer problems? Our Lottie frame inspector lets you step through animations frame by frame to identify exactly where problems occur.
Scrub through your animation timeline, examine individual frames, analyze layer structure, and export specific frames as images. Perfect for debugging, QA testing, and understanding complex animation timing.
How to Inspect Lottie Animation Frames
Debug timing and visual issues with frame-level precision:
Upload your Lottie file
Drag and drop your .json animation file. The inspector loads and prepares the timeline for frame-by-frame analysis.
Scrub through frames
Use the timeline slider to navigate smoothly through your animation. Arrow buttons let you step one frame at a time.
Analyze layer structure
View complete layer hierarchy, see which layers are active at each frame, check timing and visibility.
Export problem frames
Download any frame as PNG for documentation, bug reports, or client approval. Full resolution export with one click.
All analysis happens in your browser. No uploads, no processing delays, instant frame navigation.
Powerful Debugging Features
Everything you need to debug complex Lottie animations:
Timeline Scrubbing
Smoothly navigate through your animation frame by frame. Drag the slider or use arrow buttons for precise control.
Layer Analysis
View complete layer structure with types, names, and timing. Understand which layers are active at each frame.
Frame Export
Export any frame as PNG for thumbnails, documentation, or debugging. One-click download at full resolution.
Frame Counter
See exact frame numbers, timestamps, and progress. Track precisely where in the animation timeline you are.
Perfect For Debugging These Issues
Frame inspection solves the hardest animation debugging challenges:
Timing Issues
Identify exactly which frame has timing problems. Check when layers appear/disappear, verify transitions are smooth, and spot delayed animations.
Visual Glitches
Catch split-second visual artifacts that are hard to spot during playback. Examine individual frames to find rendering issues, flickering, or misaligned elements.
Layer Visibility
Verify layers show/hide at correct times. Debug missing elements, check layer order priority, and ensure precomps are rendering correctly.
QA Testing
Quality assurance for production animations. Export key frames for approval, verify brand consistency across frames, and document animation states.
Thumbnail Creation
Export the perfect frame for video thumbnails, app store screenshots, or marketing materials. Find the most visually appealing moment.
Client Approvals
Export specific frames for client review. Show exactly how the animation looks at key moments without requiring them to play the full animation.
Frame Inspection Best Practices
Get the most accurate debugging results:
Use arrow keys for precision
Step one frame at a time with arrow buttons to catch subtle timing issues. Slider is good for quick navigation, buttons for precision.
Check layer visibility ranges
Look at layer panel to verify in/out points are correct. Timing issues often come from incorrect layer visibility settings.
Export problem frames
When you find a visual bug, export that frame immediately. Include frame number in filename for easy reference when fixing in After Effects.
Note exact frame numbers
Document frame numbers where issues occur. Makes it much easier to find and fix problems in the original After Effects project.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
What is frame-by-frame inspection?
Frame-by-frame inspection lets you manually advance through your animation one frame at a time. This is crucial for debugging timing issues, checking layer visibility, verifying keyframe positions, and ensuring smooth transitions. You can scrub through the timeline or use step controls.
How do I use the timeline scrubber?
Drag the timeline slider to jump to any frame instantly. Use the left/right arrow buttons to step through frames one at a time. The frame counter shows the current frame number and timestamp. Click Play to watch the animation normally - it will pause when you adjust the scrubber.
What information does the layer panel show?
The layer panel displays all layers in your animation with their names, types (Shape, Precomp, Image, Text, etc.), index numbers, and in/out points. This helps you understand layer structure, identify which layers are visible at specific frames, and debug layer timing issues.
Can I export individual frames as images?
Yes! Use the "Export PNG" button to save the current frame as a PNG image. This is useful for creating thumbnails, debugging visual issues, or extracting specific animation states. The exported image matches your animation's dimensions.
Why use frame inspector instead of After Effects?
The Frame Inspector shows exactly how the animation renders in lottie-web, which may differ from After Effects due to rendering differences or unsupported features. It's perfect for debugging production issues, verifying exported animations, and QA testing without needing After Effects installed.
Is my animation data secure during inspection?
Absolutely! All processing happens in your browser. Your animation files are never uploaded to any server. The inspector works completely offline once loaded, keeping your designs private and secure.