Sprite Animation Preview

Loop multiple frames to check playback speed, frame order, and visual jitter.

How to use

  1. Choose the frame images in playback order.
  2. Set FPS and preview scale.
  3. Use Play to preview the looping animation.

What the preview is checking

The preview is most useful for spotting frame-order mistakes, uneven timing, and apparent character jitter. If the pose looks correct but the character seems to jump around the canvas, inconsistent frame origins or transparent margins are often the cause.

Canvas sizing and frame alignment

When frames have different dimensions, the preview uses the largest frame size as the common canvas and centers smaller frames. That makes size differences visible, but centering alone is not a replacement for a deliberate animation pivot.

Recommended workflow for jitter

Run the same frames through Pivot Aligner, then preview them again at the same FPS. Comparing before and after alignment makes it easier to tell whether the motion comes from the animation itself or from inconsistent image bounds.

Limitations

This is a preview tool and does not create GIF or video files. Frames of different sizes are centered relative to the largest frame.

FAQ

The playback order looks wrong.

The browser-provided file order is used. Numbering filenames such as 001 and 002 makes ordering easier.

Related tools

Worked example: compare both sets at the same 8 FPS

Both animation examples repeat the same four frames every 125 ms (8 FPS). Left uses the originals and right uses the pivot-aligned frames. The live preview plays on Canvas and does not export GIF; these examples only document the same order and timing.

Before alignment
Before alignment
After alignment
After alignment