Sprite Animator

Live preview and export your extracted sprites as animations.

See what you can make

Sprite sheet → individual PNG frames → animated GIF

Example sprite sheetAnimated sprite example
12

No Frames to Animate

Sync from the Splitter or drag and drop image files here.

Splitter

Animation Timeline

(0 Frames)

Drag to reorder frames
No frames loaded. Go to Sprite Splitter and extract sprites.

What is the Sprite Animator?

The Sprite Animator is a lightweight, browser-based testing utility for previewing pixel art animations. Rather than booting up a heavy game engine just to check if your run cycle timing is correct, you can upload your frames directly into our timeline and instantly watch the loop.

It is deeply integrated with our Sprite Splitter tool. You can slice up a complex sprite sheet and send the frames directly to the Animator with a single click. When your animation looks perfect, you can easily export it as a high-quality GIF to share on social media or in your portfolio.

Why Use the Sprite Animator?

  • Quick Prototyping: Instantly test frame timings without importing assets into Unity or Godot.
  • Portfolio Creation: Convert raw game assets into beautiful, looping GIFs to showcase your pixel art online.
  • Animation Debugging: Utilize the Onion Skin feature to analyze the movement arcs and find jittery frames.

Features:

  • Live Preview: See your animation run in real-time as you adjust settings.
  • Onion Skinning: View previous and next frames faintly in the background to ensure smooth motion.
  • Drag & Drop Timeline: Reorder frames easily by dragging them in the timeline.
  • Export to GIF: Compile your frames into an animated GIF file with custom background colors or transparency.
  • Variable Speeds: Adjust the global FPS (Frames Per Second) slider to match your intended game speed.

Usage Instructions:

  1. First, go to the Sprite Splitter to extract your frames from a sprite sheet.
  2. Click the Sync from Splitter button above to load the extracted frames into the timeline.
  3. Adjust the FPS (Frames Per Second) slider to change the playback speed.
  4. Choose a background color, or leave it transparent.
  5. Click Export GIF to save the final animation to your computer!

Pro Tips:

  • Enable Onion Skinning to verify that your frames line up perfectly. If an animation looks jittery, you may need to adjust the extraction regions in the Sprite Splitter.
  • You can drag and drop frames directly in the timeline to fix any ordering mistakes made during extraction.

Frequently Asked Questions (FAQ)

Q: Does the GIF export support transparency?
A: Yes! Make sure you select "Transparent" in the Background dropdown before exporting.

Q: Can I import a folder of individual images?
A: Yes. Upload individual PNG, JPEG or WebP images, or a ZIP of frames. You can also sync the latest frames sent from Splitter.

Q: Can I set individual frame durations?
A: Currently, the tool uses a global FPS setting. To make a frame hold longer, you can duplicate it in the timeline using the clone button on the frame thumbnail.

Guides & Articles

Transferred frames are saved only in this browser, until you clear them.