Animation Stage

1 Overview

Animation Stage is a professional browser-based 2D canvas animation application. It provides a full-featured workspace for creating, editing, and exporting animations with support for shapes, text, images, vector imports, character rigging, motion paths, AI-powered generation, and multi-scene projects.

2 Getting Started

Animation Stage runs in any modern web browser. Open the app from your web server or installed PWA.

Creating Your First Animation

1. Draw a shape — Press R for rectangle, then click-drag on the canvas.
2. Apply an animation — Switch to the Animate tab in the left panel, select your object, click an animation.
3. Preview — Press Space to play/pause, or click Preview in the toolbar.
4. Export — Click Export in the toolbar and choose your output format.

3 Workspace Layout

The workspace is divided into four major areas:

Panel Controls

• Press [ to toggle the left panel
• Press ] to toggle the right panel
• When collapsed, a vertical toolbar appears with quick-access tool buttons
• On startup, collapsible sections and nested submenus inside the left and right panels begin collapsed by default

4 Tools Panel

Selection Tools

Basic Shapes

Lines & Paths

Content & Utility

5 Creating Objects

Methods to Add Objects

1. Shape tools — Select a tool, then click-drag on the canvas
2. Objects panel — Browse the list and use add buttons
3. Icon library — Browse 80+ built-in SVG icons
4. Drag-and-drop — Drop image files onto the stage
5. Import vectors — SVG, EPS, AI, or PDF files
6. AI Mode — Natural language commands (e.g., "add a red circle")
7. Copy/paste — Ctrl+C / Ctrl+V to duplicate
8. Duplicate — Ctrl+D to duplicate in place

6 Icon Library

80+ built-in SVG icons in 9 categories, accessed from the Tools tab in the left panel.

7 Working with Text

Press X and click the stage to place a text object. Type directly, press Escape to deselect.

Text-Specific Animations

8 Working with Images

Press I or drag-and-drop image files onto the stage. Animated GIFs are automatically decoded frame-by-frame.

Image Tools (Properties Panel)

Image Filters

9 Importing Vectors & GIFs

10 Objects Panel

The Objects tab in the left panel lists all objects on the stage.

• Selection sync — Click a name to select on stage
• Rename — Double-click an object name
• Visibility — Eye icon to hide/show
• Lock — Lock icon to prevent edits
• Z-order — Drag up/down to reorder layers
• Delete — Select and press Delete

11 Layers Panel

12 Properties Panel

Transform

Fill & Stroke

Effects

13 Animation System

70+ built-in animations in three tabs: Basic, Properties, and Advanced.

Entry Animations (15)

Emphasis Animations (10)

Animation Settings

Movement: Direction vs. Move To Point

Most movement animations (Linear, Bounce, Slide, Zigzag, etc.) move along one of 8 compass directions — Up, Down, Left, Right, plus the 4 diagonals at 45° (Up-Right, Down-Right, Down-Left, Up-Left). For straight or diagonal motion to an exact point on the stage at any angle, use the dedicated Move To Point animation:

• Select the object → Animate → Movement → Move To Point
• Type the destination in the Target X and Target Y fields, or click the crosshair button beside Target Y and click anywhere on the stage to capture the coordinates
• The object animates from its current position straight to (Target X, Target Y) along the resulting vector — true any-angle movement

14 Timeline

The Timeline at the bottom shows one track per object. Coloured bars are animations.

• Drag a bar left/right to shift timing
• Drag the right edge to change duration
• Click a bar to select and see settings in the right panel
• Right-click a bar for Copy, Paste, Repeat, Split, Trim, Combine options
• Press Space to play/pause
• Drag the red playhead to scrub
• Set In/Out points with I / O keys for range looping

Playback Controls

14b Stage Camera (Animated Pan & Zoom)

The Stage Camera animates the viewport itself across the timeline — pan and zoom the visible region of the stage like a virtual camera. Great for Ken Burns effects, dolly-ins on a character, or follow shots across a SmartArt diagram.

Opening

• Top toolbar → Animate Stage (video icon)
• Or App Search (Ctrl+/) → type "stage camera"

A cyan dashed rectangle appears on the stage. The area outside it is dimmed — that's what the camera will frame at the current playhead time. The Stage Camera floating panel opens with the keyframe list, time HUD, and controls.

Adjusting the Frame

Adding Keyframes

1. Position the playhead — scrub the timeline, click a yellow diamond, or use the ◀ 1s / 1s ▶ buttons.
2. Adjust the frame for that moment.
3. Click Add Keyframe. If a keyframe already exists at the current time, the playhead auto-advances 1 s.

Editing Keyframes on the Timeline

Yellow diamond markers appear along the timeline ruler at every camera keyframe.

• Click a diamond — playhead jumps to that time
• Drag a diamond — retime the keyframe
• Shift + click a diamond — delete the keyframe
• Or edit each keyframe's time directly in the panel keyframe list (numeric input, jump-to button, easing dropdown, delete button)

Save / Discard / Playback

• Apply commits and exits edit mode (saves to scene; pushes a single Undo entry)
• Cancel discards all changes since you opened the camera
• Esc = Cancel, Enter = Apply
• The camera animates during playback and when you scrub the playhead manually
• Camera keyframes are baked into the standalone HTML5 preview/export and round-trip with the project file (per scene)
• All camera edits are covered by Undo/Redo (Ctrl+Z / Ctrl+Shift+Z)

15 Easing Editor

Click the easing name on any animation bar to open the Easing Editor. Presets include Linear, Ease, Ease In, Ease Out, Ease In-Out, Bounce, Elastic, Back, Steps, and Spring. The Custom Bezier option gives you two draggable handles to fine-tune the curve.

15b Custom Bezier Easing (Per-Animation Curves)

Each animation now stores its own custom curve. Choose Custom in the easing dropdown, then drag the two handles in the Easing Editor to draw any timing curve you want. The curve is serialized into the animation as a cubic-bezier(x1, y1, x2, y2) string and travels with the project.

1. Open an animation bar's Easing dropdown and pick Custom.
2. The Easing Editor opens prefilled with the current curve. Drag the green and blue handles to reshape it.
3. Click Apply. The new curve is stored on that animation only — other animations keep their own curves.
4. Curves persist through Save / Load, Undo / Redo, scene switching, and HTML5 / video / Lottie export.

16 Keyframe Editor

The Keyframe Editor provides frame-by-frame control for any animatable property. Open it from the right panel when an animation bar is selected. Add, move, and delete keyframes on the sub-timeline. Each keyframe stores the property value at that moment; the engine interpolates between them using the selected easing.

16b Dope Sheet (Cross-Object Keyframe Grid)

The Dope Sheet is a full-screen grid view of every animation in the scene, one row per (object, animation, property). Open it with the table icon in the timeline toolbar.

What You See

• A time ruler across the top, synced to the current timeline scale.
• One row per animated property, labelled with the object name and property.
• Three diamond colors per bar: green = animation start, blue = animation end, yellow = intermediate keyframe.
• A red playhead line that tracks the timeline position.

Interactions

1. Click any diamond to seek to that time and select it.
2. Drag a green diamond to shift the whole animation's delay.
3. Drag a blue diamond to resize the animation's duration.
4. Drag a yellow diamond to move an intermediate keyframe within its bar.
5. Click empty space to seek the playhead.
6. Delete / Backspace removes the selected keyframe (or whole animation if a green/blue endpoint is selected).
7. Esc closes the dope sheet.

Edits flow through the standard Undo / Redo stack and live-refresh on any external timeline change.

16c Onion Skin (Ghost Frames)

Onion Skin shows semi-transparent ghost frames from before and after the current playhead time, so you can see the path of motion at a glance and hand-tune in-betweens. Toggle it with the clone icon in the timeline toolbar (or press O).

Reading the Ghosts

• Red / pink ghosts = past frames (where objects were).
• Blue ghosts = future frames (where objects will be).
• Ghosts fade out the further they are from the current time.

Settings

Right-click (or Shift+click) the toolbar button to open the settings popover:

• Frames before / after — 0–8 ghost frames on each side of the playhead.
• Step (ms) — how far apart the ghost frames are (default 200 ms = 5 fps).
• Max opacity — the strongest opacity used for the closest ghost.
• Color tint — turn off if you'd rather see the ghosts in their natural colors.

How It Works

The editor seeks the animation engine to each ghost time (using the same applyAnimationsAtTime path the timeline scrubber uses), renders the resulting pose to a hidden canvas, tints it, and composites it as a low-opacity overlay. The live pose is restored before the next frame, so your edits are never affected.

17 Path Animation

Move any object along the outline of another shape.

1. Draw a path or any shape to use as the motion path
2. Select both the object and the path
3. Right-click → Animate Along Path
4. Adjust duration and loop settings in the right panel
5. Enable Orient to Path to rotate the object to follow the curve direction

18 Custom Animation Builder

In the Advanced sub-tab of Animate, the Custom Animation builder lets you combine individual property channels (X, Y, Width, Height, Rotation, Opacity, Color) into a single animation. Set start and end values per channel, then apply as a named animation.

19 Chain & Stage Sequence

Chain Animation

Morph an object between two states — shapes, positions, sizes, and colors. Select the object, choose Chain Animation, set the keyframe states, and the app interpolates a smooth transition.

Stage Sequence

Auto-staggers entry animations across multiple selected objects. Select all objects, pick an entry animation, set the stagger delay, and Stage Sequence applies it in stacked order — creating an auto-choreographed entrance without manual offset work.

20 Animated Parts (Characters)

Animated Parts lets you assemble multi-part characters from individual image or shape objects. Each part is a separate object; joints connect them with parent-child hierarchies. Animating the parent rotates the child along with it — perfect for walk cycles, wave gestures, and facial expressions.

21 Rigging & Deformation

Image Deform creates a mesh grid over a single image, then lets you drag mesh nodes to warp it — squash, stretch, or localized deformation without cutting the image apart.

The workflow for single-image deformation: select image → Properties → Image Deform → drag mesh handles. Use Reset to clear all deformations.

22 Joints (Shape Bending)

Joints add hinge-like bend points to shapes, enabling bending animations like flags, waving arms, or tentacles.

How to Add Joints

1. Select a shape object
2. In Properties, find the Joints section
3. Set the Chain Direction: Vertical (top→bottom), Vertical (bottom→top), Horizontal (left→right), or Horizontal (right→left)
4. Click Add Joint, then click on the object where you want the hinge
5. Add multiple joints to create chain segments
6. Animate segment angles in the timeline

Common Use Cases

• Waving flags, banners
• Bending arms, legs, tentacles
• Rope or chain physics
• Tail swishing animations

Flex Rig Mode

Flex Rig Mode is in Properties → Flex → Flex Rig Mode. It is an editor-only pose layer for selected Pose Armature or Universal Character parts.

• Adjust existing joint Angle, Z Tilt X, and Z Tilt Y with handles or numeric controls
• Use it for fast pose work when the rig is already connected correctly
• Use Tune Joints instead when anchor or pivot positions need correction
• It does not replace joint contours, animations, preview, export, or the existing rigging modes

23 Pin System

Pins create parent-child relationships: the child follows the parent's position (and optionally angle) in real time.

How to Pin

1. Select the child object
2. In Properties → Object Attachment, choose the Parent Object
3. Optionally choose a Parent Joint to follow a specific joint world position
4. Set Pin Offset and Rotation Mode

To unpin: right-click → Unpin, or set Parent Object to None.

24 Inverse Kinematics (IK)

IK lets you drag the end of a joint chain and all intermediate joints adjust automatically for a natural pose.

How to Use

1. Select an assembled character with joints
2. Hold Shift + drag a body part (e.g., a hand)
3. The entire chain (shoulder → elbow → wrist) adjusts via CCD algorithm
4. Release to set the pose

25 Guided Assembly

A step-by-step wizard for rigging pre-cut body parts into a jointed character. Access via Properties → Joints → Build & Cut → Guided Assembly.

1. Place all body parts on stage (head, torso, arms, legs as separate objects)
2. Select them all
3. Open Guided Assembly
4. The wizard asks you to identify each part
5. Joints are automatically placed at connection points
6. Use Tune Joints to refine positions

26 Universal Character

Generates a fully rigged parametric character from scratch — no images needed. Access via Properties → Joints → Build & Cut → Universal Character.

Use Front-Side or Back-Side when the character should face partly toward the side while keeping the front/back animation catalog. Use Clothing Mode → Pinned Parts when clothing should be generated as separate garment layers that follow the torso, upper arms, forearms, upper legs, and lower legs during poses and movements.

27 Body Slicer

Uses curve-based guides to slice a single full-body character image into separate body parts. Access via Properties → Joints → Build & Cut → Body Slicer.

1. Select the character image on stage
2. Open Body Slicer
3. Drag the curve guides to match the character proportions
4. Click Slice to cut the image into parts
5. Parts are automatically assembled with joints
6. Save a layout after adjusting — it applies automatically next time

28 Pose Armature Character Skin

Transfers artwork from a character image onto armature parts while preserving the joint and motion system.

Workflow

1. Open Pose Armature
2. Click Place Overlay (or select an existing image on stage)
3. Align the overlay/image over the armature parts
4. Use Fit Shapes to resize/reshape rig parts as needed
5. Click Sample Selected
6. Click Save Template to reuse on future rigs

29 AI Character Creation Workflows

AI Mode supports the full character pipeline via natural language (Ctrl+M).

30 Reset Joints & Clear Timeline

Reset All 0° (Joints Section)

The Reset All 0° button in the left-panel Joints section resets all joints for selected rigged objects back to zero without deleting the joints. Use this when a cutout character has been posed and you want to return it to its neutral state.

Clear Timeline

The Clear Timeline button removes every animation from the timeline after a confirmation alert. Use when you want to wipe all animation bars and start a scene fresh without deleting the objects themselves.

31 Stage Settings

Canvas Dimensions

Background

The current scene's stage settings are used by preview and export, including background color, gradient, pattern, image, and background opacity.

Grid & Snapping

Zoom & Pan

Zoom range: 5%–1000%

32 Scenes

Create multi-scene presentations with transitions between slides.

• Add Scene — Click the + button in the scene strip
• Navigate — PageDown / PageUp
• Transitions — Set entry/exit transitions per scene in Stage Settings
• Reorder — Drag scenes in the scene strip
• Duplicate Scene — Right-click a scene thumbnail
• Export All Scenes — Toggle in the Export dialog

32b Symbols (Reusable Components)

A symbol is a reusable component made from one or more stage objects. Edit the master once and every instance on the stage updates automatically. Open the library with the shapes icon in the timeline toolbar.

Create a Symbol

1. Select one or more objects on the stage.
2. Open the Symbols panel and click Convert Selection to Symbol.
3. Name it. The originals are replaced by a single linked instance.

Use a Symbol

• Place drops another instance at the stage center.
• Each instance behaves like a normal object — select, drag, animate, group, layer, copy/paste, undo all work.
• Resizing an instance scales the whole symbol's contents proportionally.

Edit the Master

1. Click Edit master on a symbol row.
2. The stage swaps to the symbol's contents and a purple banner appears at the top.
3. Make your changes, then click Save in the banner. Every instance refreshes on the next frame.
4. Cancel discards the edit and restores the previous stage.

Other Actions

• Rename renames a symbol.
• Delete removes the symbol AND every instance on the stage (with confirmation).
• The library is saved with the project and round-trips through Save/Load and Undo/Redo.

33 Templates

Click Templates in the top toolbar to open the template browser. Click a template to preview, then Apply to load it. All objects and animations are fully editable after applying.

34 Export & Save

Export Formats

Transparent Background Export

Set the stage background to Transparent in Stage Settings; the export dialog automatically enables transparent output.

The HTML5 preview/export shell shows a checkerboard behind transparent or semi-transparent stage backgrounds so opacity stays visible without baking that checkerboard into the export.

Multi-Scene Export

Toggle Export All Scenes in the export dialog to export every scene together. Use Preview All Scenes to preview the full sequence before exporting. Each scene keeps its own stage settings, and those scene-specific settings are used during preview/export.

Project Save/Load

34b Lottie / Bodymovin Export

Export your animation as a Lottie JSON file ready for lottie-web, lottie-react-native, or After Effects bodymovin import. Open the Export dialog and pick the Lottie tile.

How It Works

Each visible stage object is rendered to a base64-embedded PNG asset and added as a Lottie image layer with animated transform keyframes (position, rotation, scale, opacity). This trades file size for fidelity — every object type (rounded rect, brace, joint armature, traced path, gradient fill, drop shadow, glow, text, image, depth-extruded shape) survives pixel-perfect with no per-type reimplementation.

What's Included

• Top-level fr uses the FPS dropdown in the export dialog.
• Stage size becomes the Lottie composition w / h.
• Z-order is preserved (Lottie ind:1 = top layer).
• Animations on x, y, rotation, scaleX, scaleY, and opacity are converted to Lottie p, r, s, o keyframes.
• Easing curves — named (ease-in, ease-out, ease-in-out, linear) or custom cubic-bezier(…) from the Easing Editor — are converted to Lottie bezier handles.
• A final hold key is added at op so the last animated value persists.

When to Use Lottie

• Embedding the animation in a website with crisp scaling and small runtime overhead.
• Shipping into a React Native or Flutter app via lottie-react-native / lottie.
• Round-tripping into After Effects via the bodymovin importer.

35 Settings

Click the gear icon ⚙ in the top-right toolbar.

36 Layout System (Flex)

Animation Stage supports 5 workspace layouts. Click the Layout button in the top toolbar or press Ctrl+L to cycle through them. Use App Search (Ctrl+/) and type "Flex" to jump directly to the layout controls.

Panel Visibility Toggles

In the Layout dropdown you can individually toggle the Left Panel, Right Panel, Stage, and Timeline.

Stage + Timeline is the cleanest no-panels workspace when you want just the canvas and timeline visible.

37 Undo & Redo

Animation Stage maintains a full snapshot-based undo history.

What's Tracked

• All objects and their properties
• Current selections
• Groups and layer structure
• Stage background settings

A 50 ms debounce is applied for compound operations — dragging an object records only one undo entry, not hundreds of intermediate positions.

38 Boolean Operations

Select two or more shapes, then right-click → Boolean:

39 Grouping & Point Editing

Grouping

• Group: Select multiple objects → Ctrl+G
• Ungroup: Ctrl+Shift+G
• Edit Group: Double-click a group to enter and edit individual members

Point Editing

Press E to enter point-editing mode for freeform shapes, polygons, and paths. Drag points, click a segment to add a point, press Delete to remove. Advanced shapes (rounded rectangles, polygons, braces, arrows, callouts) can be converted to editable point sets.

40 Tags System

Tags label and filter objects. Open the Tags tab in the right panel to add tags to the selected object. Body Tags (e.g., head, torso, arm) integrate with the rigging system for semantic body mapping.

• Use App Search or the Tags panel to filter stage objects by tag
• Right-click → Add Tag for quick tagging
• Right-click on empty stage → Add Position Tag to place a named location marker

41 Audio Timeline

Click the audio icon in the Timeline controls to open the Audio Timeline. Add audio tracks by uploading audio files. Each track appears as a waveform bar — drag to set start time, adjust volume per track. Audio is included in MP4, WebM, and HTML5 exports.

42 SmartArt

The SmartArt module (SmartArt button in the top toolbar, or standalone at smartart.html) creates structured animated diagrams with AI-powered generation.

Describe what you want in natural language — the SmartArt AI generates the layout, structure, and content automatically. Animated transitions, custom colors, fonts, and styles are all configurable.

43 Assets Library

A filesystem-backed library (stored under assets/library/) for reusable stage objects, uploaded images/GIFs, and JSON asset packages.

Save to Assets Library

1. Right-click a stage object → Save to Assets Library
2. Pick an existing folder or type a new folder path
3. Enter a unique asset name (duplicates are blocked)
4. Save

Import From the Library

1. Click Assets in the top toolbar
2. Search by asset name or folder
3. Click an asset card to preview, then Import

Upload From Computer

Open Assets → Upload → choose images, GIFs, or JSON asset packages. Files are indexed immediately.

44 Copy Properties & Paste as Clone

Copy Properties (Right-click → Copy Properties)

Copies a human-readable summary plus a hidden ANIMSTAGE_PROPS JSON payload. Includes: position, size, rotation, Stage Angle, joint angle, X/Y tilt, fill, stroke, opacity, shadow, glow, pin relationships, body part data, and animation data.

Paste as Clone (Right-click Empty Stage → Paste as Clone)

Detects the hidden payload in clipboard, decodes it, and creates an exact clone at the click position — preserving all properties including animations, rigging, pin data, and body part assignments.

Copy All Properties (Right-click Empty Stage → Copy All Properties)

Exports a tab-separated table of every object on stage with 49 columns including Z Order, Depth, Stage Angle, Joint Angle, Tilt X/Y, pin data, animations, body tags, and transformed corner coordinates (TL, TR, BR, BL). Paste directly into any spreadsheet.

45 Measure Tool

Displays pixel distances between objects or between an object and stage edges.

1. Select the Measure Tool from the Tools panel or App Search
2. Hover over objects — floating labels show distances from each side to the stage edges and gaps between nearby objects
3. Use for precise layout and spacing verification

46 App Search

A Spotlight-style search for quickly accessing any tool, animation, button, section, property, or tab. Press Ctrl+/ (or Cmd+/ on Mac) to open.

• Results filter in real-time as you type
• Click a result to scroll to and highlight the matching element
• Tool buttons are also activated when clicked from search results
• Press Escape to close

47 AI Mode

Toggle AI Mode with Ctrl+M or the toolbar button. The left panel becomes an AI prompt field. Click Generate or press Ctrl+Enter.

AI Actions

LLM Providers

48 Teach Me (Help Chat)

A built-in AI help assistant. Click the Teach Me button (graduation cap icon) in the top toolbar.

The same shared knowledge also powers the home-page assistant, so product questions on the portal stay aligned with in-studio help.

Example questions: "How do I animate an object?" · "How do I export as video?" · "How do I use rigging?" · "How do I use Flex Rig Mode?" · "How do I use pinned clothing?" · "How do I clear all animations from one object?"

49 Code Panel

The Code tab in the right panel lets you view, edit, and run animation code directly.

Quick-Start Templates

• Bounce
• Orbit
• Particle System
• Wave Motion
• Stagger Sequence

50 Keyboard Shortcuts

Tool Shortcuts

Action Shortcuts

View & Navigation

Timeline Shortcuts

51 Context Menus

Right-click on Object

Right-click on Empty Stage

Right-click on Timeline Bar

52 PWA / Desktop App

Animation Stage is a Progressive Web App. Click Install App in the toolbar when available to install it as a standalone desktop application. It launches from your dock/taskbar like a native app and supports offline use via service worker caching.

53 Panel Docking

Floating panels automatically dock into the right panel when opened.

• When a floating panel opens, it appears inside the right panel
• Click the ↗ undock button to pop it out as a floating window
• Drag a docked panel to undock it and move it freely
• The dock area auto-hides when no panels are docked

Panels That Support Docking

All JointSystem panels (Assembly, Movements, Poses, Smart Cut, Body Stencil, Body Slicer, Guided Rig, Armature, Tune, Expressions), Rigging panels (Deform, Influence, Edit Points, Warp), and the Teach Me help panel.

A Appendix A: File Structure

B Appendix B: Browser Requirements

• Modern browser with HTML5 Canvas support (Chrome, Firefox, Safari, Edge)
• JavaScript enabled
• For export features: Fetch API and Blob support
• For PWA: Service Worker support
• For audio: Web Audio API support
• Recommended: Chrome or Edge for best File System Access API support (Save/Load)