Lottieto100% private — in your browser
Lottie → Sprite sheet

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

  1. 1Upload a Lottie file (.json, .lottie, or .tgs), or try the example
  2. 2Adjust frame rate, quality, resolution and transparency
  3. 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.

How to convert Lottie to a sprite sheet

  1. 1

    Drop in your animation. Drag & drop a Lottie .json, .lottie, or .tgs file — or paste a URL. It loads instantly and never leaves your browser.

  2. 2

    Tune the output. Set frame rate, quality, and resolution up to 4× — plus a transparent background where the format supports it.

  3. 3

    Export & download. Hit the export button and the file downloads straight from your browser — free, no watermark, no signup.

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?

FormatTypeTransparencyColorBest for
GIFAnimated image1-bit (hard edges)256 colorsEmail, chat, universal support
APNGAnimated image8-bit (smooth)Full 24-bitIcons, logos, quality over size
WebMVideoYes (VP9 alpha)FullSmall web video, transparent overlays
MP4VideoNoneFullSocial, ads, video editors
SVGVector (SMIL)YesFullRuntime-free embeds
PNG / WebPStill imageYesFullPosters, 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.

Other Lottie conversions

Lottie → GIFConvert Lottie to GIFLottie → MP4Convert Lottie to MP4Lottie → WebMConvert Lottie to WebMLottie → APNGConvert Lottie to APNGLottie → SVGConvert Lottie to animated SVGLottie → PNGConvert Lottie to PNGLottie → WebPConvert Lottie to WebP (still image)Lottie → PNG framesConvert Lottie to a PNG sequenceOptimize LottieOptimize & compress Lottie filesLottie ⇄ dotLottiedotLottie converterLottie → Sprite sheetConvert Lottie to a sprite sheetTelegram sticker → GIFConvert TGS (Telegram sticker) to GIF.lottie → GIFConvert dotLottie to GIF.lottie → MP4Convert dotLottie to MP4Lottie → Transparent GIFConvert Lottie to a transparent GIFLottie → Transparent WebMConvert Lottie to transparent WebMLottie → InstagramConvert Lottie to MP4 for InstagramLottie → TikTokConvert Lottie to MP4 for TikTokLottie → YouTubeConvert Lottie to MP4 for YouTubeLottie → Email GIFConvert Lottie to GIF for emailLottie → Slack GIFConvert Lottie to GIF for SlackLottie → READMEConvert Lottie to GIF for a GitHub READMEJSON → GIFConvert an animation JSON file to GIFLottie → VideoConvert Lottie to videoTGS → WebMConvert TGS (Telegram sticker) to WebMAfter Effects → GIFAfter Effects to GIF — via Lottie, no render queueLottie → DiscordConvert Lottie to GIF for DiscordLottie → SlidesConvert Lottie to GIF for PowerPoint & Google Slides

Converting lots of files? Batch convert free — or automate this conversion with the render API (beta).