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

> Animate sprite sheets online: auto-detect the grid, set frame order, fps and onion skin, export GIF, APNG, WebP or frames — or pack frames into a sheet + JSON.

- URL: https://qilingtools.com/en/image/sprite-animate
- Category: Image Tools (https://qilingtools.com/en/image)
- Tags: [Image](https://qilingtools.com/en/tags/image), [Design](https://qilingtools.com/en/tags/design), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

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.

## How to use

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

## Features

- Grid auto-detection from transparent gutters or background colour
- Slice by rows × columns or cell size, with margin, spacing and empty-cell skipping
- Frame order expressions (ranges, reverse, repeats) and ping-pong
- Pixel-art zoom, onion skin, frame stepping and per-cell pixel offsets
- Export GIF, APNG (own fcTL/fdAT writer), lossless animated WebP or PNG frames at 1–8×
- Pack frame images or a GIF into a sheet, with trimming and power-of-two sizes
- TexturePacker-compatible JSON (hash/array) and CSS keyframe animation
- Runs locally — nothing is uploaded

## 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.

## Related tools

- [PDF to Image](https://qilingtools.com/en/pdf/to-image): Free online PDF to image converter: render every page as a high-resolution JPG or PNG at 72/150/300 DPI, download all as a ZIP. Processed locally, no upload.
- [Image to PDF](https://qilingtools.com/en/pdf/from-image): Free online image to PDF converter: combine JPG, PNG and WebP images into one PDF in order, with A4 or image-sized pages. Processed locally, no upload.
- [Compress Image](https://qilingtools.com/en/image/compress): Free online image compressor: batch compress JPG, PNG and WebP with adjustable quality and a max size, showing the before and after sizes. Runs locally.
- [Resize Image](https://qilingtools.com/en/image/resize): Free online image resizer: batch resize by pixel width and height or by percentage with the aspect ratio locked. JPG, PNG and WebP, processed locally.
- [Convert Image](https://qilingtools.com/en/image/convert): Free online image converter: batch convert JPG, PNG, WebP, GIF and BMP images to JPG, PNG or WebP. Processed locally, no upload.
- [Watermark Image](https://qilingtools.com/en/image/watermark): Free online image watermark tool: batch add text watermarks with position, tiling, opacity, size and color settings. Processed locally, no upload.
- [Stitch Images](https://qilingtools.com/en/image/stitch): Free online image stitcher: join screenshots or photos vertically or horizontally into one long image, with gap and background options. Processed locally.
- [Remove Background](https://qilingtools.com/en/image/remove-bg): Free online background remover: AI finds people, products and animals and cuts the background to a transparent PNG, or swaps in a white, red or blue backdrop.