Make your first animation
- In Costumes, draw a picture or upload one.
- Open Animate. Move the playhead to the start and press Set keyframe.
- Move the playhead later, then drag the costume or change its position, size, rotation, or opacity.
- Press Set keyframe again. Between creates the in-between movement.
- Press Play. Change Tween to next key to adjust how the movement accelerates.
Costumes and drawing
A costume is one image you can place on an animation track. Use the brush, airbrush, custom brush, eraser, fill tools, line, rectangle, ellipse, or Select tool. Drawing Undo affects only the current image; the header Undo reverses larger project changes.
New costume starts blank. Duplicate copies the current costume. Upload accepts common image files, and Text costume makes editable lettering. Flip and Delete affect the whole selected costume.
Timeline, tracks, and keyframes
Each track animates one costume at a time. The playhead shows the current time. A diamond is a saved keyframe; dragging a diamond changes its time. Add another track when several costumes need to appear together.
Set keyframe saves position, size, stretch, rotation, opacity, visibility, costume choice, character choices, and tween style. Copy and Paste keyframe can reuse all of those settings. Layer buttons control which tracks appear in front.
Choose an FPS, turn frame snapping on, and switch the timeline display between seconds and frames. Timeline zoom changes only the editor view, not animation timing.
Scenes and transitions
New scene creates a boundary at the playhead. Costumes remain available, but the new scene starts with fresh tracks so earlier visuals are hidden. Scene cards show the start and middle frames.
Select a scene after the first one to choose a transition and its length. Custom transitions can combine movement, scaling, rotation, fading, easing, and a shaped iris reveal. Deleting a scene removes its time and scene tracks, while full-timeline sounds are kept.
Character Lab
Draw separate body parts and faces, then use Assemble to position them. Save named poses for arrangements you want to use in animation. Parts can have drawing variations, pivots, and parents so connected pieces move together.
Small animations use their own Character Lab timeline. Add the character to the animation, then choose its pose, face, or small animation on main-timeline keyframes. Poses and part movement tween; face drawings switch without morphing.
Particle Lab
Create an effect, adjust its shape, colors, rate, lifetime, movement, gravity, and fading, then add it to the animation. On a particle track, Visible becomes Emit particles. Turning it off stops new particles while already-created particles finish their lifetime.
Sound and speech
Upload or record sounds, or create speech with an installed text-to-speech voice. Sounds live on the full timeline and can cross scenes. Drag trim handles or enter trim times, then adjust volume and fade-in or fade-out.
Text-to-speech video export may ask you to share the current tab with audio so the browser can record the generated voice.
Camera and onion skin
Camera keyframes animate the view center, zoom, and rotation separately from costume tracks. Onion skin shows the neighboring keyframes of the selected track while paused: blue is the previous key and pink is the next key. These guides do not appear in exports.
Asset Library
Save costumes, characters, particle effects, and sounds for other projects. Search or filter the library, then use Add to project to make a new copy. Export library makes a portable backup; importing adds assets without replacing the current library.
Saving, opening, and browser storage
Save project updates the opened file when the browser permits it. Save as chooses a new file. Project JSON contains the animation, drawings, character data, particles, and sounds.
Autosave and the Asset Library are stored only in this browser for this copy of the app. Clearing site data, changing browsers, or playing from a different itch.io address can make that local data unavailable. Keep downloaded project files and exported asset-library backups for important work.
Exporting
Export frame PNG saves the current animation frame. Export video offers WebM or MP4, resolution, frame rate, quality, sound, and either the full animation or current scene. Video export plays the animation in real time, so it takes about as long as the exported range.
Useful keyboard controls
- Ctrl+Z: undo a project change
- Ctrl+Y or Ctrl+Shift+Z: redo
- Ctrl+C / Ctrl+V: copy and paste a selection in a drawing editor, or a keyframe in Animate
- Delete: erase the active drawing selection
- Escape: close dialogs or finish the current selection
Precision editing and canvas coordinates
The stage is 640 by 400 pixels. X increases to the right and Y increases downward; the center is X 320, Y 200. Numeric fields are useful for exact placement, repeated rotations, matching sizes, and moving an object beyond the visible stage.
Canvas zoom and Pan change only your editor view. They do not resize artwork or affect exported frames. A pixel selection can be moved, deleted, copied between drawings, or rotated around the center of its selected rectangle.
Exactly how tweening works
The tween choice on a keyframe controls the journey from that keyframe to the next one. Linear moves at a constant rate. Smooth eases both ends, Ease in starts slowly, Ease out finishes slowly, Bounce overshoots visually, and Hold keeps the earlier value until the next key.
Position, size, stretch, rotation, opacity, camera values, and character-part transforms can blend. Visibility, costume changes, face drawings, and most discrete choices switch rather than blending. A body-part variation changes halfway between its previous and newly selected keyframe.
Frames, snapping, duration, and retiming
FPS controls the frame grid used by snapping and frame display. With snapping enabled, playhead moves, new keys, dragged keys, markers, scene boundaries, and sound starts align to frames. Turning snapping off allows hundredth-of-a-second placement.
Changing total duration does not proportionally move keyframes: a key at 2 seconds stays at 2 seconds. Data beyond a shortened end can be retained and return when the duration is extended. Dragging a key cannot cross its neighboring keys or leave its scene.
Tracks, layers, scenes, markers, and intros
Visual tracks belong to one scene. Their order is also their paint order: tracks farther forward are drawn over tracks behind them. A scene boundary swaps to that scene's tracks, while sounds and markers use the full project timeline.
Markers are named timing notes and do not change the animation. An intro video is a separate pre-roll played before time zero; it is included before the animation during video export.
Character rigs, pivots, parenting, and clips
A pivot is the point a body part rotates around. When a pivot is moved, saved pose coordinates are adjusted so the artwork does not jump. Parenting stores a child's transform relative to its parent, letting a torso carry an arm and the arm carry a hand. Circular parent chains are prevented.
A small animation is independent of named poses. Once fits one complete pass into the span until the next main keyframe. Loop fits the chosen number of complete passes into that span. The main timeline first tweens into the clip's starting body arrangement, while the face remains independently selectable.
Custom brushes and drawing behavior
Hardness softens the edge of each stamp. Spacing controls the distance between stamps. Angle rotates non-round tips. Smoothing makes the stroke follow the pointer more gradually. Scatter spreads stamps around the path and can extend several brush widths away.
Opacity is applied while drawing, so repeated passes build color. Fill and Erase bucket affect one connected area. Export brush saves the current custom-brush settings; an imported brush can be used in both Costumes and Character Lab.
Audio decoding, trimming, fades, and limits
Trimming is non-destructive: it changes which part of the decoded source plays. Moving the start trim also moves the visible clip so the same source moment stays aligned. Volume and fade envelopes are applied during playback and video export.
Uploads may use any audio format the browser can decode. Large files, long files, or unsuitable channel layouts are downmixed and resampled to compact mono WAV data. A clip can be up to five minutes. The editor warns after 20 clips and has an emergency ceiling of 50.
Repeatable particles and emission
Particles are recalculated from timeline time instead of relying on a continuously running simulation. That makes the same time render consistently during scrubbing, thumbnails, PNG export, and video export.
An emitter's position and other track transforms can tween. Hiding the emitter changes only the creation of new particles; every particle already born continues using its lifetime, velocity, gravity, and fade settings. A new scene stops the previous scene's particle history.
Custom transition composition
A transition belongs to the scene being entered, not the scene being left. Its duration occupies the opening part of that scene. Built-in transitions combine the outgoing and incoming rendered scenes; a custom transition can independently add travel, starting scale, rotation, incoming/outgoing fades, and easing.
Iris reveal clips the incoming scene to a growing circle, square, diamond, or star around the chosen center. Transition preset files can be exported and imported without changing the rest of the project.
Rendering, camera, and video compatibility
Each exported frame draws scene tracks in layer order, applies particles and character animation, applies the camera, and then composites any active scene transition. Onion skin, selections, editor zoom, and editor pan are never included.
Video is captured in real time using browser media features. Available MP4 or WebM choices depend on the browser's encoders. Resolution changes output pixel dimensions; FPS changes captured frame frequency; quality changes the requested bitrate. Exporting a scene trims the visual and audio range without editing the project.
Project files, autosave, and recovery limits
Project files are JSON with embedded image and audio data, so they can become large. Open validates the data before replacing the current project. Older supported versions receive defaults for features they did not store.
Autosave keeps one recent project in browser storage and is a recovery convenience, not a permanent archive. Asset Library storage is separate from autosave and project files. Browser storage can be cleared or isolated by a different itch.io domain, browser profile, or private window, so downloadable project and library backups remain the reliable copies.
Built-in project limits
The editor warns before crossing its recommended limits. You can continue up to the higher emergency ceilings, but editing, autosave, and export may become slow or glitchy.
- Timeline: warning after 5 minutes; emergency ceiling of 60 minutes
- Costumes and visual tracks: warning after 30 each; emergency ceiling of 100 each
- Sound clips: warning after 20; emergency ceiling of 50
- Characters: warning after 12, stronger warning after 30, emergency ceiling of 50
- Particle effects: warning after 12; emergency ceiling of 30
- Individual audio and intro clips: up to 5 minutes
- Saved Asset Library entries: up to 100 in this browser
- Character parts, poses, variations, and animation keys also have safeguards to keep files responsive
No help topics match that search.
