Animator

A sprite animation editor for creating frame-by-frame animations, tween-based motion, and event tracks.

Overview

The animator lets you build sprite animations for your game characters, objects, and effects. The editor is organized into four areas:

Left sidebar

Animations and spritesheets list

Preview

Live preview of selected animation

Timeline

Tracks and keyframes on a time ruler

Properties

Edit selected animation, track, or keyframe

All changes save automatically with full undo/redo support (Cmd/Ctrl+Z / Cmd/Ctrl+Shift+Z).

Animations

An animation is a named sequence containing one or more tracks. Each has its own duration, loop setting, and timeline.

Create one by clicking + at the top of the animation list. Select an animation to see it in the preview and its tracks in the timeline.

Setting	Description
Name	Rename in the properties panel.
Duration	Total length in seconds, set via the toolbar.
Loop	Toggle repeating with the loop button in the toolbar.
Snap to grid	Align keyframes to a regular interval.
Grid size	Snap interval in seconds (visible when snap is on).

Duplicate an animation with the copy icon. Delete with Delete.

Tracks

Tracks are layers within an animation. Each holds keyframes of a specific type. There are three track types:

Sprite

Displays a sprite frame from a spritesheet at each keyframe. Use for frame-by-frame animation.

Tween

Interpolates between keyframes over a duration with an easing function. Use for smooth motion, fades, or scale.

Event

Fires a named event at a specific time. Use to trigger sounds, effects, or game logic.

Add a track with + Track in the timeline toolbar and choose the type. Tracks can be renamed in properties, reordered by dragging, and deleted with Delete.

Keyframes

Keyframes define what happens at a specific time on a track. Double-click a track lane to add one, or use Next Frame to add at the next grid step with an incremented frame index.

Click to select, Shift+click for multi-select, Cmd+A to select all. Drag to reposition. Resize tween keyframes by dragging their edge.

Sprite keyframe properties

Property	Description
Time	Position in seconds.
Sprite	Click to open the frame picker and choose a frame from a spritesheet.
Frame X / Y	Column and row of the selected frame in the spritesheet grid.
Offset X / Y	Pixel offset to fine-tune position.
Flip	Mirror horizontally, vertically, or both.

Tween keyframe properties

Property	Description
Time	Position in seconds.
Duration	Length in seconds.
Easing	Interpolation curve: Linear, Step, Ease In/Out/In-Out, Bounce In/Out/In-Out, Exponential In/Out/In-Out, Parabolic.

Spritesheets

A spritesheet is an image with multiple animation frames in a grid. Upload spritesheets and reference individual frames from sprite track keyframes.

Switch to the spritesheets tab in the left sidebar and click + to upload. Click a name to open the editor where you can:

•Set tile width and tile height to define the frame grid
•View image dimensions, grid size, and frame count
•Replace the image or delete the spritesheet

Frame picker

When editing a sprite keyframe, click Sprite in properties to open the frame picker. It shows spritesheets on the left and a clickable frame grid on the right. Click any frame to assign it. With multiple keyframes selected, the picker lets you change the spritesheet for all at once.

Preview and playback

The preview panel shows a live rendering of the selected animation at the current playhead position.

Control	Description
Play / Pause	Start or pause. Also Space.
Stop	Stop and reset to the beginning.
Step forward/back	Move by one grid step (or 0.01s if snap is off).
Skip to start	Jump to time zero.

With loop enabled, playback restarts at the end. With loop off, it stops automatically.

Keyboard shortcuts

Shortcut	Action
`Space`	Play / pause
`Delete`	Delete selected keyframe, track, or animation
`Escape`	Deselect or close modal
`Cmd/Ctrl+Z`	Undo
`Cmd/Ctrl+Shift+Z`	Redo
`Cmd/Ctrl+A`	Select all keyframes

Export format

Exporting a project produces a .zip file containing JSON animation files and spritesheet images. Use these files to play back animations in any game engine.

ZIP structure

project.zip ├── index.json # Manifest ├── animations/ │ └── Walk.lostanim # Per-file animation data └── resources/ └── hero_sheet.png # Spritesheet images

index.json (Manifest)

The root file listing all animation files and spritesheet resources.

{ "name": "My Animations", "hash": "a1b2c3...", "animationFiles": [ { "name": "Hero", "path": "animations/Hero.lostanim" } ], "resources": [ { "id": "uuid", "name": "hero_sheet", "path": "resources/hero_sheet.png", "tileWidth": 32, "tileHeight": 32, "imageWidth": 256, "imageHeight": 256 } ] }

.lostanim (Animation file)

Each file contains one or more animations with their tracks and keyframes.

{ "name": "Hero", "animations": [ { "id": "uuid", "name": "Walk", "duration": 0.8, "loop": true, "snapToGrid": true, "gridSize": 100, "tracks": [...] } ] }

Field	Description
duration	Total length in seconds (float).
gridSize	Snap interval in milliseconds.
tracks[].type	"sprite", "tween", or "event".

Sprite keyframe

{ "id": "uuid", "time": 0.0, "frame": { "x": 0, "y": 0 }, "offset": { "x": 0.0, "y": 0.0 }, "flipX": false, "flipY": false, "spritesheetId": "uuid", "anchors": { "hand": { "x": 10.5, "y": 20.3 } } }

Field	Description
frame.x / y	Tile-grid coordinates (column and row in the spritesheet).
spritesheetId	References a resource id from index.json. Omitted when null.
anchors	Named anchor points with {x, y} positions.

Tween keyframe

{ "id": "uuid", "time": 0.2, "duration": 0.3, "easing": "EaseInOut", "anchors": { "hand": { "x": 15.0, "y": 25.0 } } }

Valid easing values:

•Linear, Step, Parabolic
•EaseIn, EaseOut, EaseInOut
•BounceIn, BounceOut, BounceInOut
•ExponentialIn, ExponentialOut, ExponentialInOut

Event keyframe

{ "id": "uuid", "time": 0.5, "anchors": {} }

Event keyframes mark a point in time. The track name serves as the event identifier in your game engine.

Documentation