How does grid auto-detection work, and what if it’s wrong?

The tool checks which columns and rows are completely transparent (or match the top-left background colour when there’s no alpha) and analyses those gutters. If the content blocks are equal in size with equal gaps, it reads off the cell size, margin and spacing directly; otherwise it looks for the largest number of equal columns whose boundaries all fall on empty lines. Sheets with no gaps between frames can’t be detected — just enter the rows and columns or the cell size.

APNG or GIF — which should I choose?

GIF is limited to 256 colours and on/off transparency, so soft edges can look jagged or fringed. APNG keeps full colour and 8-bit alpha and plays in all major browsers, which suits animations with smooth edges or gradients. Pixel art with few colours often gives a smaller GIF; for clean edges on the web or in chat apps, choose APNG or animated WebP.

What are per-cell offsets for?

Hand-drawn frames, or frames grabbed from video, are often a pixel or two out of place, which makes the animation jitter. Pause on that frame and nudge its cell with the arrow buttons. The offset belongs to the cell, so every place it appears in the sequence moves with it, and it’s kept in every export.

Can I use the generated JSON in a game engine?

Yes. The JSON follows the common TexturePacker layout — frame, rotated, trimmed, spriteSourceSize and sourceSize per frame, plus a duration and meta block — so engines that read TexturePacker JSON, such as Phaser, PixiJS or Cocos, can load it directly. When trimming is on, spriteSourceSize records where the content sat in the original frame so the engine can restore it.

🏃

🏃Sprite Sheet Animator - Slice, Preview, Export GIF & APNG

Game characters and pixel-art animations usually live on a single sprite sheet. Upload one and the tool detects the grid from the transparent gutters — or from the background colour when the image has no alpha — handling evenly divided sheets as well as sheets with margins and spacing. If it guesses wrong, slice by rows and columns or by cell size instead, with separate margin and spacing values, and empty cells are skipped automatically. Frame order accepts expressions like 1-8, 8-1, 3,5,7 and 1-4x2, ping-pong playback is one tick away, and the frame rate runs from 1 to 60 fps. The preview offers crisp pixel-art zoom, checker or solid backgrounds and onion skinning; pause to step through frames, and if one cell is drawn a pixel off you can nudge that cell to remove the jitter. Export at 1–8× scale as a GIF with transparency, an APNG assembled right on the page from fcTL/fdAT chunks with full 8-bit alpha, a lossless animated WebP, or a ZIP of PNG frames. It works in reverse too: pack several frame images or an animated GIF into a sprite sheet with automatic or fixed columns, padding, transparent-edge trimming and power-of-two sizes, plus TexturePacker-compatible JSON (hash or array) and CSS with a frame-by-frame animation. Everything runs locally in your browser and nothing is uploaded.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Sprite Sheet Animator

1Upload a sprite sheet, check the detected grid and adjust rows, columns, cell size, margins or spacing if needed
2Set the frame order, frame rate and ping-pong, and fix the motion with onion skin and per-cell offsets
3Export a GIF, APNG, animated WebP or frame ZIP — or switch to “Frames / GIF → sprite sheet” to pack a sheet with JSON

FAQ

How does grid auto-detection work, and what if it’s wrong?: The tool checks which columns and rows are completely transparent (or match the top-left background colour when there’s no alpha) and analyses those gutters. If the content blocks are equal in size with equal gaps, it reads off the cell size, margin and spacing directly; otherwise it looks for the largest number of equal columns whose boundaries all fall on empty lines. Sheets with no gaps between frames can’t be detected — just enter the rows and columns or the cell size.
APNG or GIF — which should I choose?: GIF is limited to 256 colours and on/off transparency, so soft edges can look jagged or fringed. APNG keeps full colour and 8-bit alpha and plays in all major browsers, which suits animations with smooth edges or gradients. Pixel art with few colours often gives a smaller GIF; for clean edges on the web or in chat apps, choose APNG or animated WebP.
What are per-cell offsets for?: Hand-drawn frames, or frames grabbed from video, are often a pixel or two out of place, which makes the animation jitter. Pause on that frame and nudge its cell with the arrow buttons. The offset belongs to the cell, so every place it appears in the sequence moves with it, and it’s kept in every export.
Can I use the generated JSON in a game engine?: Yes. The JSON follows the common TexturePacker layout — frame, rotated, trimmed, spriteSourceSize and sourceSize per frame, plus a duration and meta block — so engines that read TexturePacker JSON, such as Phaser, PixiJS or Cocos, can load it directly. When trimming is on, spriteSourceSize records where the content sat in the original frame so the engine can restore it.