Lottie Animation Preview

Preview and inspect Lottie JSON animations with playback controls, speed, and color overrides.

Tested tool guide Tested browser tools Checked August 16, 2026

What Lottie Animation Preview does, with a checked example

Lottie Animation Preview takes a complete Lottie JSON document and displays its composition with playback, speed, and color-override controls. It helps determine whether an exported animation has the expected canvas, duration, motion, and visible palette before it is embedded elsewhere. The important surprise is that valid JSON and compatible Lottie content are separate questions. A document can parse successfully yet appear incomplete when it relies on unsupported animation features, external image assets, or fonts that are unavailable during preview.

Worked example

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":"Red square","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":1,"nm":"Red Solid","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[20,20,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"sw":40,"sh":40,"sc":"#ff0000","ip":0,"op":30,"st":0,"bm":0}]}

Expected output

A 100 x 100 composition with a static, opaque red 40 x 40 square centered at coordinates (50, 50). The timeline lasts 1 second at 30 frames per second.

The solid layer is 40 units wide and high, and its 20,20 anchor is placed at 50,50. The animation covers frames [0, 30), with the out point excluded, so it contains 30 frames. At 30 fps, 30 / 30 = 1 second; checking again, 1 second multiplied by 30 fps gives 30 frames.

How the result is produced

Composition and timing

The root `w` and `h` fields set the composition coordinate space. `fr` is frames per second, while `ip` and `op` delimit the timeline. Nominal duration is `(op - ip) / fr` seconds. Playback controls advance that timeline, and speed changes how quickly it is played. Speed does not create motion when every animation property is static.

Colors and linked assets

Lottie color values depend on the element: shape fills and strokes commonly use normalized channel arrays, while a solid layer can carry a hex color. Overrides let you test alternate rendered colors, but raster pixels are not editable vector fills. JSON referencing external images may need those assets to display correctly. Parsing and previewing remain in the browser.

Good uses

Check a freshly exported logo animation for the expected composition size, timing, movement, opacity, and visible colors before placing it in a website or app.
Compare playback speeds to decide whether an animation feels too abrupt or too slow without changing its keyframes or exporting another JSON file.
Test a brand-color substitution on vector artwork and identify portions that remain unchanged because their color is baked into an image or effect.

Limits and checks

A successful JSON parse proves only that the text is valid JSON. It does not prove that every property, expression-derived result, effect, or asset can be reproduced by the preview.
Missing images or fonts can make layers blank or visually different. That result does not by itself show that the animation JSON is corrupt.
Treat a color override as a preview of an alternate appearance. Do not assume embedded bitmap colors changed or that the pasted source document was rewritten.

Common questions

Can I paste an After Effects project file?

No. The preview expects the JSON representation of a Lottie animation, not an `.aep` project. Export the composition to Lottie JSON first. Even after export, only features represented by Lottie and supported during playback can appear, so a complex After Effects composition may not reproduce every effect, expression, font, or linked asset.

Why does changing speed alter playback time but not the reported animation duration?

The document's nominal duration comes from its frame interval and frame rate: `(op - ip) / fr`. The speed control changes how quickly those frames are shown, not the stored frame rate or keyframe positions. A 30-frame interval at 30 fps is nominally 1 second; at 2x playback it is viewed in 0.5 seconds.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.