Animation & motion tools

Lottie JSON Previewer

Upload a Lottie animation JSON file to play, pause, loop, scrub through frames and preview it as crisp, scalable SVG.

Upload a file to see frame rate, total frames and duration here.

How to use the Lottie JSON previewer

  1. Upload a Lottie fileChoose a .json file exported from After Effects, Bodymovin or LottieFiles.
  2. Play and adjustUse Play, Pause, Loop and the Speed slider to preview it the way you need.
  3. Scrub frame by frameDrag the Frame slider to jump to and inspect any exact frame.

How this Lottie previewer works

Lottie is a JSON animation format that stores vector shapes, paths and keyframes as structured data rather than pixels or video frames. This tool loads your file with the official lottie-web library and renders it using its SVG renderer, so the shapes stay perfectly sharp no matter how large the preview is. Everything happens with a single JavaScript library already loaded on this page; your animation file itself is parsed and rendered locally, never uploaded anywhere.

SVG rendering

Vector shapes are redrawn as real SVG elements, so the preview scales cleanly at any size instead of showing compressed pixels.

Frame-accurate scrubbing

The Frame slider calls lottie-web's goToAndStop method to jump straight to any frame in the animation.

Speed and loop control

Playback speed and looping are adjusted live through lottie-web's own setSpeed and setLoop APIs.

Nothing is uploaded

Your JSON file is read locally with the File API. Only the lottie-web library itself is fetched from a CDN, once.

Lottie JSON Previewer FAQ

What is a Lottie JSON file?

Lottie is a JSON-based animation format, typically exported from Adobe After Effects using the Bodymovin or LottieFiles plugin. It describes vector shapes, paths and keyframes as data instead of a video, so animations stay small and perfectly crisp at any size.

Why does this preview as SVG instead of a video?

The tool renders your Lottie file with lottie-web's SVG renderer, which draws the actual vector shapes described in the JSON. That means the animation stays sharp at any zoom level instead of showing compressed video pixels.

Is my Lottie file uploaded anywhere?

No. The JSON file is read and parsed entirely in your browser with the File and JSON APIs. The only network request this page makes is loading the lottie-web library itself once from a CDN; your animation file never leaves your device.

How do I scrub through the animation frame by frame?

Drag the Frame slider. It pauses the animation and jumps straight to the frame number you choose, using lottie-web's goToAndStop method.

What if my file fails to load?

If the file isn't valid JSON, or doesn't match the Lottie animation format, the tool shows a message instead of crashing. Double check you exported it correctly from After Effects, Bodymovin or a tool like LottieFiles.

Try other free tools

More handy tools from My Panda Toolbox.