Upload and preview Lottie JSON animations with playback controls, speed adjustment, and frame inspection.
A Lottie JSON file becomes a controllable visual preview for playing, pausing, scrubbing through frames, and testing different playback speeds. The preview reflects the composition data in the uploaded file, including its dimensions, timing, layers, shapes, transforms, and keyframes when those features are supported. The frequent surprise is that valid JSON is not necessarily a portable Lottie animation. A file can reference missing images or fonts, or contain exporter-specific features that do not display consistently across Lottie players.
A concrete input and expected output from the current implementation.
Input
{"v":"5.7.4","fr":30,"ip":0,"op":30,"w":100,"h":100,"nm":"Static red square","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Square","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[20,20]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle"},{"ty":"fl","c":{"a":0,"k":[1,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Red fill"},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Square group","np":3,"cix":2,"bm":0}],"ip":0,"op":30,"st":0,"bm":0}],"markers":[]} Expected output
A 100 by 100 composition containing an opaque red square measuring 20 by 20 composition units, centered at coordinates 50,50. Active frames 0 through 29 look identical. At 30 frames per second, the active interval lasts exactly 1 second.
The rectangle has no keyframed properties, so it remains stationary throughout the preview. The duration is (30 - 0) / 30 = 1 second, and the layer position places the square at the composition center.
The w and h fields define the Lottie composition's coordinate space. The fr value gives frames per second, while ip and op define its active interval. Frame inspection uses that timeline, making it possible to check a precise animation state instead of estimating a position from elapsed playback time.
Play and pause expose keyframed motion, scrubbing selects a point on the composition timeline, and speed adjustment changes the viewing rate. It does not alter the timing declared inside the source example. The uploaded animation remains in the browser rather than being sent elsewhere, which matters when inspecting unreleased artwork or interface assets.
No. Its purpose is playback and inspection, not animation authoring or structural repair. If a layer, color, keyframe, asset reference, or composition setting is wrong, update the source project or JSON with an appropriate authoring tool and load the revised file again.
Lottie players do not necessarily support every exported effect, expression, mask, text feature, or asset arrangement in the same way. Confirm that referenced assets are available and test the same JSON in the actual target player. Valid JSON only establishes that the text follows JSON syntax; it does not establish complete Lottie compatibility.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.