Lottie Animation Player

Preview and play Lottie JSON animation files with speed and loop controls.

Tested tool guide Tested browser tools Checked August 16, 2026

What Lottie Animation Player does, with a checked example

Lottie Animation Player loads a Lottie JSON file, displays its composition, and lets you test different playback speeds or repeat the timeline continuously. It interprets the animation's dimensions, frame rate, in point, out point, layers, and referenced assets. A common mistake is assuming that any syntactically valid JSON document is playable. The file must also contain meaningful Lottie composition data. Selected files are handled in the browser and are not uploaded.

Worked example

A concrete input and expected output from the current implementation.

Input

{"v":"5.7.4","fr":30,"ip":0,"op":60,"w":100,"h":100,"nm":"Blank two-second animation","ddd":0,"assets":[],"layers":[]}

Expected output

A transparent 100 x 100 composition with no visible artwork. At 1x speed, its timeline lasts 2 seconds. At 2x speed, playback lasts 1 second. Enabling loop repeats the same blank timeline.

The timeline spans 60 frames because op - ip is 60, and 60 frames divided by 30 frames per second equals 2 seconds. The empty layers array leaves the composition transparent, while 2x speed halves the playback time.

How the result is produced

Composition timing

The player takes the composition frame rate from fr and uses ip and op as the timeline's in and out points. At normal speed, duration is calculated as (op - ip) / fr seconds. The w and h values define the composition bounds, while layers and assets describe the content that can appear inside them.

Playback controls

Speed changes the rate at which the loaded timeline advances. A 2x setting takes half as much wall-clock time as 1x, while 0.5x takes twice as much. Looping causes playback to restart after reaching the out point. These controls affect the current preview only and do not modify values in the selected JSON file.

Good uses

Inspect a motion designer's exported Lottie JSON before adding the asset to a website or application, checking that its dimensions, visible layers, and timing look plausible.
Slow down a short icon or interface transition to examine keyframe motion, clipping, opacity changes, and the exact point at which an element enters or leaves the composition.
Repeat an animation continuously to check whether its final state connects cleanly to its initial state or produces a visible jump at the loop boundary.

Limits and checks

Successful JSON parsing does not prove that the document contains the required Lottie composition fields or meaningful animation layers.
Images, fonts, or other referenced resources may be absent from the JSON itself. Missing resources can produce blank areas, substitutions, or a preview that differs from the intended design.
A successful preview shows that this player can render the file. It does not guarantee identical results in every application because support for particular Lottie features can differ between players.

Common questions

Does changing the playback speed retime the Lottie file?

No. The speed control changes only how quickly the current preview advances. It does not rewrite fr, ip, op, keyframes, or other values in the loaded document. To make the timing change permanent, edit or retime the source animation and export a new Lottie JSON file.

Why does valid JSON produce a blank preview?

Valid JSON only means that the text follows JSON syntax. A blank Lottie preview can also result from an empty layers array, fully transparent content, shapes outside the composition bounds, missing referenced assets, or an animation whose visible portion occurs elsewhere on the timeline. The worked example is intentionally valid but blank.

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.