Checking a Lottie file before you ship it: fps, frame count, layers, and file size
Why a Lottie file needs inspecting, not just playing
Most "Lottie player" tools do exactly one thing: play the animation. That answers "does it work?" but not the questions that actually matter before a file ships — what frame rate did the designer bake it at, how many frames total, how many layers deep, and does it embed any raster images that will bloat your app bundle? This tool answers all of those in one upload: play the animation, scrub to any frame, and read frame rate, duration, layer count, precomp count, and embedded-image count directly from the parsed JSON — no manual digging through the file in a text editor.
Verifying a file before it goes into your app or codebase
The most common use case: you downloaded a Lottie from LottieFiles, received one from a designer, or got the output of a video-to-Lottie conversion, and before wiring it into your React, iOS, or Android project you want confidence it actually plays correctly at the size and frame rate you expect. Check the dimensions against your layout, confirm the frame rate matches your target (30fps for smooth motion, lower for simple UI loaders), and scrub through the whole animation once to catch any broken frames or unexpected jumps before a teammate or QA finds them in the shipped build.
Diagnosing why a Lottie file is bigger than it should be
"Why is my Lottie file so big" almost always traces back to one thing: embedded raster images. A pure vector animation authored in After Effects is typically tiny — a few KB of shape and keyframe data. An animation converted from video or GIF (like the output of our MP4 to Lottie or GIF to Lottie converters) embeds every frame as a base64 image, which can run into megabytes. The "Embedded images" count in the info panel tells you immediately whether that's the case. If it is and the file needs to be smaller, run it through our Lottie Optimizer, which recompresses those images and typically cuts 20-60% off the total size.
Reading layer and precomp counts
Layer count and precomp count are rough proxies for animation complexity and render cost. A simple icon loader might have 3-5 top-level layers and no precomps; a detailed character animation from After Effects can have dozens of layers nested inside several precomps. On lower-end mobile devices, very high layer counts can affect frame rate at playback — if an animation feels sluggish on a target device and the layer count here is unusually high, that's a signal worth investigating with the animation's original author, rather than assuming it's a player performance bug.
Frame-accurate scrubbing for bug reports and QA
When an animation glitches at a specific point — a shape jumps, a color flashes wrong, a layer disappears too early — describing "somewhere in the middle" to a designer isn't useful. Drag the frame slider here to the exact frame where the issue occurs, note the frame number shown above the slider, and include it in your bug report or Slack message. It's a much faster loop than re-opening the source After Effects project to scrub to the same spot.
Privacy and client-side processing
Parsing, rendering, and every calculation in the info panel happen entirely in your browser — your file is never uploaded anywhere. That matters when you're inspecting an unreleased app's onboarding animation or a client's unpublished brand assets. Once you've confirmed a file looks right, the rest of the Lottie converter toolkit covers exporting it as a GIF or MP4 for sharing, or optimizing it for production.