Drop a Lottie JSON or .lottie file to preview the animation right away. Play, pause and scrub through every frame, change the speed and background, jump to markers, and see its size, frame rate, duration and layers.
Last updated:
Drop .json or .lottie to open
0 / 0
Animation details
Layers
Advertisement
Advertisement
How to use the Lottie Viewer
Open a file with Open Lottie file or drag a .json or .lottie file onto the player. A sample animation plays on load.
Play or pause with the button or the space bar, and turn Loop on or off.
Scrub the timeline slider to any frame, or use the step buttons (or the arrow keys) to move one frame at a time.
Change speed and background to check timing and transparent areas against light or dark pages.
Inspect the details panel for dimensions, frame rate, duration, layers and markers, and download the JSON if needed.
What is inside a Lottie JSON file
A Lottie animation is a single JSON object. A handful of top-level keys describe the canvas and timeline, and a layers array holds the content, drawn from the last layer (bottom) to the first (top). Shape layers contain groups of paths, ellipses and rectangles with fills, strokes and transforms; any property can be static ("a": 0) or animated with keyframes ("a": 1).
Key
Meaning
Example
v
Bodymovin/Lottie format version that exported the file
"5.7.4"
w, h
Canvas width and height in pixels
512, 512
fr
Frame rate in frames per second
30
ip, op
In point and out point (first frame and the frame after the last)
0, 90
layers
Layer list (shape, solid, image, null, text, precomp)
[ … ]
assets
Images and precompositions that layers refer to by id
[{"id":"image_0", …}]
markers
Named points or ranges on the timeline (tm start, dr duration, cm name)
{"tm":30,"cm":"hover","dr":20}
fonts, chars
Fonts and glyph outlines for text layers
{"list":[…]}
Duration in seconds is (op − ip) ÷ fr. An animation with ip 0, op 120 and fr 60 runs for 2 seconds.
Layer type numbers
ty
Layer type
Notes
0
Precomp
Shows a nested composition from assets
1
Solid
A filled rectangle of one color
2
Image
Bitmap from an image asset (embed it as a data URI)
3
Null
Invisible parent used to move other layers together
4
Shape
Vector shapes: the most common and best-supported type
5
Text
Text with font data; rendering depends on available fonts
Tips for smaller, smoother Lottie animations
Keep the frame rate at 24-30 fps for UI animations; 60 fps doubles the keyframe data for little visible gain on icons.
Prefer shape layers over images. Bitmaps make files much larger and blur when scaled.
Use markers to name segments (intro, loop, outro) so developers can play just the part they need.
Check the animation on both light and dark backgrounds: thin dark strokes often disappear in dark mode.
Step through the first and last frames to make sure a looping animation starts and ends on matching poses.
Frequently asked questions
What is a Lottie file?
Lottie is a JSON-based vector animation format, originally exported from After Effects with the Bodymovin plugin. It stores shapes, keyframes and timing as data, so a player can draw the animation at any size with a small file.
What is the difference between .json and .lottie?
A .json file is the raw Lottie animation. A .lottie (dotLottie) file is a ZIP archive that bundles one or more Lottie JSON animations with a manifest and any images they use. This viewer unzips .lottie files in your browser and embeds the images.
Is my animation uploaded anywhere?
No. The file is read and played locally. The only download is the open-source lottie-web player library, loaded from a public CDN the first time you use the tool.
Why does my animation look different from After Effects?
Lottie players support most but not all After Effects features. Expressions, some effects, layer styles, 3D layers and certain blend modes are partly or not supported. Keep animations to shapes, masks, transforms and trim paths for the best results.
How is the duration calculated?
Duration in seconds equals (out point − in point) ÷ frame rate. For example, an animation with ip 0, op 90 and fr 30 lasts 90 ÷ 30 = 3 seconds.
Why do images in my JSON not show?
Lottie JSON can reference external image files by path. If those files are not embedded as data URIs, the player cannot find them. Use a .lottie file or export with images embedded.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.