Convert Lottie to a sprite sheet
Tile every frame of a Lottie animation into a single PNG sprite sheet — for game engines, CSS steps() animations, and texture atlases.
How it works
- 1Upload a Lottie file (.json, .lottie, or .tgs), or try the example
- 2Adjust frame rate, quality, resolution and transparency
- 3Export to any format — or optimize and repackage as dotLottie
Nothing is uploaded. SVG output uses SMIL and needs no JavaScript; APNG and WebM keep the full color and transparency GIF can't.
About converting Lottie to a sprite sheet
A sprite sheet packs all the animation's frames into one grid image, which is how game engines, CSS steps() animations, and many mobile/embedded pipelines prefer to consume animation. This tool renders your Lottie's frames and tiles them near-square into a single transparent-capable PNG.
Pick the frame rate, quality, and resolution — the frames land left-to-right, top-to-bottom, all the same size, so slicing them in Unity, Godot, Phaser, or CSS is trivial. If you'd rather have loose files, the PNG-sequence export gives you a ZIP of numbered frames instead.
Which format should I use?
| Format | Type | Transparency | Color | Best for |
|---|---|---|---|---|
| GIF | Animated image | 1-bit (hard edges) | 256 colors | Email, chat, universal support |
| APNG | Animated image | 8-bit (smooth) | Full 24-bit | Icons, logos, quality over size |
| WebM | Video | Yes (VP9 alpha) | Full | Small web video, transparent overlays |
| MP4 | Video | None | Full | Social, ads, video editors |
| SVG | Vector (SMIL) | Yes | Full | Runtime-free embeds |
| PNG / WebP | Still image | Yes | Full | Posters, thumbnails, placeholders |
Frequently asked questions
How are the frames laid out?+
Left-to-right, top-to-bottom in a near-square grid, every cell the same size — the standard layout engines and CSS steps() expect.
Can the sheet be transparent?+
Yes — enable “Transparent background” and the PNG keeps full alpha for clean compositing.
What if my animation has too many frames?+
Very long/high-res combinations can exceed safe canvas sizes; if that happens you'll get a clear message to lower FPS, quality, or resolution.
