EasyLottie Guide
Why Is My Lottie Animation Not Playing? (And How to Fix It)
Blank canvas, missing images, or an animation that just will not move? Here are the usual reasons a Lottie fails to render, and how to pin down the cause fast.
Start by isolating the file from your code
When a Lottie will not play inside your app, the first question is whether the problem is the file or the integration. The fastest way to find out is to open the same file in a standalone Lottie viewer. If it plays there but not in your app, the issue is your runtime setup; if it fails in the viewer too, the file itself needs attention.
Drop the JSON (or ZIP) into EasyLottie Preview. It renders locally in your browser, so you get an immediate, honest answer without touching your codebase.
The most common causes
Most "Lottie not playing" reports come down to a short list of causes. Work through them in order.
| Symptom | Likely cause | Fix |
|---|---|---|
| Blank boxes where images should be | External image assets are missing | Upload a ZIP with the JSON + images, or embed the images |
| Nothing shows at all | Broken/invalid JSON, or wrong file | Re-export the animation; confirm it is a real Lottie JSON |
| Plays in a viewer, not in your app | Renderer or runtime setup | Check the lottie-web/lottie-react config, autoplay, and loop |
| Parts missing or wrong | Unsupported expressions/effects | Re-export without unsupported features, or rasterize |
| Invisible on the page | No size, or same-color background | Give the container width/height; change the background |
Fix #1: missing images (the most frequent one)
A very common case is a Lottie JSON that references external image files. On its own, the JSON has nowhere to load those images from, so you see blank boxes. The fix is to upload a ZIP that contains the JSON and its image folder together, or to rebuild the file with the images embedded. If you are not sure whether your file uses external images, previewing it will show the blanks immediately.
Fix #2: it plays in a viewer but not in your app
If the file animates in Preview but not in your product, the file is fine — the integration is not. Check that the animation container has a real width and height, that autoplay and loop are set the way you expect, and that the renderer (SVG vs canvas) supports what the animation uses. A background the same color as the animation can also make a perfectly working Lottie look invisible.
Quick checklist
- Open the file in Lottie Preview to isolate file vs integration.
- If images are blank, upload a ZIP with the JSON + image folder.
- If nothing shows, re-export and confirm it is valid Lottie JSON.
- If it plays in the viewer only, check container size, autoplay, loop.
- Switch the background color to rule out invisible-on-same-color.
Frequently asked questions
Why does my Lottie show blank boxes instead of images?
The JSON references external images that are not bundled with it. Upload a ZIP containing the JSON and its images, or embed the images.
My Lottie plays in a viewer but not in my app — why?
The file is fine; the integration is not. Check the container size, autoplay/loop settings, and the renderer configuration in lottie-web or lottie-react.
How do I know if the file itself is broken?
Open it in EasyLottie Preview. If it fails to render there too, re-export the animation and confirm it is a valid Lottie JSON.
Why is my Lottie invisible even though it loads?
The container may have no size, or the background is the same color as the animation. Give it width/height and change the background to check.