How the Lottie analyzer works
Published and reviewed: July 26, 2026
JSON Animation Viewer does more than render a file. It performs a deterministic static inspection of the Lottie JSON structure and turns the detected properties into metadata, layer, optimization, compatibility, and integration guidance. This page documents exactly what the analyzer checks so that you can interpret its output without treating a heuristic as a guarantee.
Local processing boundary
The selected JSON file is read with the browser FileReader API, parsed in the current tab, and passed directly to lottie-web and the analyzer. The application does not intentionally upload the JSON file to an application server or store it in a product database.
A Lottie file can reference external image assets. Rendering such a file may cause the browser or lottie-web to request those asset URLs. For confidential work, use embedded assets or inspect the browser network panel before rendering a file with external references. Normal page requests and third-party advertising scripts are separate from animation-file processing and are described in the privacy policy.
What the analyzer checks
Metadata
Reads Lottie version, generator, canvas dimensions, frame rate, in/out frames, duration, top-level layer counts, assets, embedded images, markers, and 3D flags.
Layer structure
Builds a parent-child tree and reports type, frame range, blend mode, 3D state, masks, effects, hidden state, and unnamed layers.
Optimization signals
Flags embedded images, unnamed or hidden layers, expressions, duplicate shape paths, heavy keyframe counts, oversized image assets, and missing markers. A signal is a review prompt, not proof that a file is defective.
Platform compatibility
Detects expressions, merge paths, 3D layers, mattes, gradient strokes, per-character text, and trim paths, then compares them with the analyzer’s maintained web, iOS, and Android support matrix.
Integration snippets
Generates starting examples for React, Next.js, Vue, HTML, Swift, and Kotlin using the uploaded file name and detected dimensions. Dependency versions and project conventions still need to be checked before production use.
Performance score
The score is a static complexity heuristic. It is not a runtime FPS, memory, battery, or startup benchmark. The weighted inputs are:
| Layer count | 20% |
|---|---|
| Expressions | 20% |
| Effects | 15% |
| Masks | 15% |
| 3D usage | 10% |
| Embedded images | 10% |
| Frame rate | 10% |
Grades are A at 90–100, B at 75–89, C at 60–74, D at 45–59, and F below 45. A lower score means the file deserves closer review; it does not predict that an animation will fail.
Known limitations
- The analyzer inspects the JSON structure and does not execute a device lab benchmark.
- Compatibility results cover only explicitly detected features in the maintained matrix and cannot guarantee identical output across player versions.
- Precompositions are included in deep feature scanning, while the headline layer count reports top-level layers.
- External assets, fonts, player configuration, browser capabilities, and application code can change the rendered result.
- Suggestions should be validated against the original After Effects project and the actual target devices.
Evidence and change control
The analyzer implementation and its unit tests are public. Scoring thresholds and detection rules change only through source changes that can be reviewed and tested. When a rule changes materially, this page’s review date and the affected article guidance should be updated together.