What Is Lottie? A Practical Guide to the JSON Format

The useful mental model

A Lottie file is structured animation data. Top-level fields describe the composition size, frame rate, in and out frames, assets, and layers. Individual layers carry transforms, shapes, masks, effects, text, image references, and keyframes.

The player library—not the JSON by itself—turns those instructions into pixels. lottie-web can render with browser technologies, while iOS and Android players use their own implementations. Player versions and supported features therefore matter as much as the exported file.

• Use w and h to understand the source aspect ratio, not the final CSS size.
• Use fr, ip, and op to calculate duration: (op − ip) ÷ fr.
• Inspect assets to distinguish embedded images, external images, and precompositions.
• Inspect layers and feature flags before assuming the same result on every runtime.

What this viewer can verify

JSON Animation Viewer reads the selected file in the browser, validates a minimum Lottie-like structure, and renders it with lottie-web. It extracts metadata, builds a layer tree, scans for platform-sensitive features, and generates optimization prompts.

The performance grade is a documented static heuristic. It weights layer count, expressions, effects, masks, 3D usage, embedded images, and frame rate. It is useful for deciding where to investigate, but it is not an FPS, memory, startup-time, or battery measurement.

A clean web preview means the file rendered in the current browser. It does not certify iOS, Android, React Native, or your production container.

Where Lottie works well—and where it does not

Lottie is often a strong fit for interface motion: icons, state transitions, onboarding illustrations, loaders, and short vector sequences that need programmatic playback. Vector-focused exports can scale cleanly, and code can control frames, speed, direction, and segments.

It is a weaker fit for photographic motion, long video-like sequences, or compositions that depend on unsupported After Effects features. Embedded raster assets and dense keyframes can make a JSON file large; complex masks, effects, expressions, and 3D layers can create runtime differences.

A production handoff checklist

Treat previewing as the first gate in a wider handoff. Record the intended container, background, loop behavior, reduced-motion behavior, target players, and fallback. Then test the same file on representative low-end and current devices.

• Confirm visible timing, clipping, transparency, fonts, and external assets.
• Compare web, iOS, and Android feature support for every detected advanced feature.
• Measure real startup, memory, and frame behavior in the target app.
• Keep the source composition and export settings with the JSON for future fixes.