Animation Frames Play 1, 10, 2? Check Filenames and the Actual Sequence
Separate file-manager display order, the tool frame list, and final playback before changing FPS or declaring a renaming fix complete.

The AI-generated cover shows several poses. It is not a numbered frame sequence, a real split result, or evidence of correct frame timing.
All twelve images are present, yet playback jumps from frame 1 to frame 10 and back to frame 2. Before lowering FPS to disguise the jump, compare filenames, the tool's frame list, and the sequence actually consumed by the target project.
Text order and numeric order are different
For example, frame_1.png, frame_2.png, and frame_10.png have the intended numeric order 1, 2, 10, while a common string comparison produces 1, 10, 2. The MDN Array.sort reference documents JavaScript's default string comparison. This explains one possible mechanism; it does not establish which sorting implementation Tooliva or your engine uses.
A correct-looking file-manager view does not prove that upload, export, and runtime loading use the same order. Confirm natural sorting, text sorting, or a manually maintained list at the actual stage being tested.
Zero padding has limits
For a planned twelve-frame group, a test copy could use one prefix and three-digit numbers: hero_attack_001.png through hero_attack_012.png. Equal-width numbers help this simple same-prefix group retain numeric order under text comparison. Three digits are an example specification, not a requirement for every project.
Padding cannot fix images assigned to the wrong numbers, mixed animations, or a manually different list. Revisit the full naming convention if numbering exceeds its width. Do not rename files already referenced by a live project without preserving an old-to-new mapping and checking the dependent references.
Build an explicit sequence record
- Intended sequence number and original filename.
- Recognizable content stage, such as anticipation, strike, or recovery where applicable.
- Position in the tool's frame list.
- Position used after export or by the target project.
If 008 is absent, determine whether a file is missing or the design intentionally omits that number. Do not duplicate 007 merely to reach a target count. If both 001.png and 1.png exist, batch padding can also create a name collision. Decide what each file represents before anything is overwritten.
Inspect the list inside the tool
Open the Animation Frame Tool and check this group's actual frames and order. Its public description includes frame-order adjustment and animation preview, but that does not promise a particular numeric sorting rule on upload or identical controls in every workflow.
Keep canvas dimensions, image contents, and playback parameters fixed while correcting a confirmed ordering error. Preview the complete action afterward. If the sequence is right but the character still jitters, investigate canvas and reference points. If the sequence is right but too fast, investigate timing separately.
Verify the order after export too
Retain the record and compare the exported images, actual metadata, or receiver's agreed sequence. Inspect only files that are really provided. A ZIP's internal listing is not automatically the player's order; check the target project's loading convention and final playback.
Observe the transition from last frame to first as well, without deleting intentional holds or blank frames just to hide a jump. For timing, see frame count, FPS, and loop duration. Mark this check complete only when image content, numbering, list order, and actual playback agree.
Recommended tools

Automatic Sprite Slicing and ZIP Export: A Faster Way to Prepare 2D Game Assets
Learn how automatic sprite slicing and one-click ZIP export can help indie game developers turn character sheets, icon collections, and AI-generated 2D artwork into organized PNG assets faster.

From AI Sprite Cutter to Sprite Sheet Maker: A Complete 2D Asset Workflow
A practical workflow guide for turning raw 2D images into sliced PNG files, downloading them as a ZIP package, and using those files to create sprite sheets for Unity, Cocos, Godot, and custom game engines.

Smart Sprite Sheet Packer: A Practical Guide for 2D Game Developers
Learn how a smart sprite sheet packer helps indie game developers combine PNG assets into clean texture atlases with metadata for Unity, Cocos, Godot, and custom 2D game engines.
Ready to try "Animation Frames Play 1, 10, 2? Check Filenames and the Actual Sequence"?
Use our online tools to apply this tutorial to your indie game project right away.
