Animation preview

PNG sequence Spritesheet

From Cut / Merge, or multi-select PNGs.

Drop frame PNGs (multi-select)

Playback

FPS

Loop

—

View

Show grid

Load frames from Cut or Merge.

How to use

Animation Preview plays 2D sprite animations from a PNG sequence or a single spritesheet grid. Test timing before importing into Unity, Godot, Cocos, or custom engines — no install required.

PNG sequence mode

Select PNG sequence (default).
Drop multiple frame PNGs, or use Open Animate from Cut / Merge.
Frames load in sorted filename order. Set FPS and Loop.
Use Play/Pause and ◀ ▶ to step through frames.

Spritesheet mode

Select Spritesheet and upload one PNG grid (left→right, top→bottom).
Enter Cols and Rows. Enable Auto cell size or set Cell W/H manually.
Set Gap X/Y — use 2 for Spine Preview exports.
Adjust Off X/Y and Max if needed. Click Apply grid & preview.

Typical workflows

Spine → Preview → Animate: export spritesheet, upload here with matching cols/rows/gap.
Cut → Animate: cut a sheet, click Open Animate for instant playback.

FAQ

Frames jitter during playback?: Match gap and cell size to source. Use origin-aligned Spine spritesheet export.
Auto-load from another tool?: Use Open Animate on Cut or Merge — data passes via session storage.
What FPS to use?: 12 for classic 2D, 24 for smooth motion, or match your Spine export FPS.