Learn Animation Stage in practical steps.

Top Toolbar — File actions (New, Save, Load), Undo/Redo, Preview, Export, Templates, AI Mode toggle, and Settings. Always visible across the top of the screen.

Left Panel — Three tabs: Tools (drawing tools, icon library), Objects (list of all stage objects), and Layers (layer stack). Collapse with [. In AI Mode it becomes the prompt panel.

Canvas Stage — Your drawing and animation area. Scroll-wheel to zoom, hold Space + drag to pan. The white rectangle inside is your export frame.

Right Panel — Four tabs: Properties (position, size, fill, effects), Animate (animation library), Tags, and Code. Updates live as you select objects.

Timeline — Sits at the bottom. Each object gets a track. Coloured bars are animations. Drag bars left/right to shift timing, drag the right edge to change duration. Space to play.

Create or select one object — Press R, then click-drag on the canvas to draw a rectangle. Any simple shape works, but a rectangle makes the first animation easy to read.

Place it and clear the stage view — Move the rectangle to a clean area on the canvas. If you want more space while judging the motion, collapse the left panel after the object is selected.

Route 1: right-click the object — Right-click the selected rectangle, then choose Animate → Entry → Zoom In. This is the fastest object-first route when you already know which item should animate.

Route 2: use the Animate panel directly — Open the right-side Animate tab. In Basic, go to Entry and click Zoom In. This is the best route when you want to compare several animation buttons quickly.

Route 3: use App Search — Click the search button in the top toolbar, or press Cmd+/ on Mac. Search for zoom in, animate, or entry animation, then activate the result to jump straight to the control.

Adjust timing, preview, then apply — In the animation settings, set a readable duration such as 1.1s. Review the easing, click Preview inside the animation panel, and when the motion feels right click Apply.

Review it on the stage — Use the Play button above the canvas for the fastest in-place check while you are still arranging objects on the stage.

Review it in Preview and the timeline — Open Preview for the viewer-facing playback window. Then use Go to Start and Play in the timeline when you want to inspect the exact authored timing inside the editor.

Background shape — Draw a large rectangle covering the stage. In Properties, set Fill Type to Linear Gradient. Pick start/end colours. Send it to back: right-click → Send to Back.

Add icons — Left panel → Tools tab → scroll to Icon Library. Search "person", "briefcase", or "car". Click to drop onto stage. Resize by dragging corner handles. 80+ built-in SVG icons across 9 categories.

Add text — Press X, click on stage, type your headline. Change Font, Size, Weight in Properties. Try the Typewriter animation from the Animate tab.

Import an image — Press I or drag-drop a PNG/JPG onto the stage. With the image selected: Properties → Image Tools → Remove Background. Adjust Tolerance and click Apply.

Use Layers — Left panel → Layers tab. Add a layer (+). Move background to Layer 1, foreground objects to Layer 2. Lock Layer 1 to prevent accidental selection.

Group elements — Select multiple objects (Shift-click or drag to select). Press Ctrl+G to group. Move, scale, and animate the whole group as one. Double-click to enter and edit individual parts.

Rename objects — In the Objects tab (left panel), double-click any name to rename. A clear naming convention ("Hero Text", "Logo Icon") makes the timeline much easier to read.

Shift timing — Click and drag a bar left/right to change when it starts. A tooltip shows the exact time. Drag the right edge to extend or shorten its duration.

Easing curves — Select a bar, open Properties. Click the Easing dropdown. Try Bounce for physical entry, Back for overshoot, Ease Out for natural deceleration. Choose Custom to open the Bezier Curve Editor and drag the control points.

Looping — Select an Emphasis bar (e.g., Pulse). In Properties, set Repeat to Infinite. Set Repeat Style to Ping-Pong to reverse smoothly each cycle.

Split a bar — Position the playhead over a bar, press S. The bar splits into two independent animations at that point — useful for multi-phase movements with different easing per phase.

Recording mode — Click the Record button in the timeline. Move an object on the canvas — its path is captured as keyframes in real time. Stop recording, rewind, and play to see it replayed.

Range markers — Press I to set an In point, O for an Out point. Export only that range, or delete everything inside it with the range delete button.

Seed one real move first — In the Animate panel, select a simple movement such as Linear Move on a selected object and click Apply. The rest of the lesson now has one truthful animation row to inspect instead of pretending advanced tools work from an empty state.

Dope Sheet — Click the table icon to open the cross-object timing grid. Each animated property gets its own row, so you can seek, drag, and retime motion after the base move has already been applied.

Onion Skin — Click the clone icon to ghost frames before and after the current playhead. Shift-click or right-click the same button to reopen the settings popover for frame count, step distance, opacity, and tint.

Symbols — Open the symbols button and use Convert Selection to Symbol to turn the current artwork into a reusable master-plus-instance workflow. This is the component route for repeated badges, icons, labels, and other stage elements you may animate more than once.

Custom Bezier easing — Click the animation row in Applied Animations first. That puts the editor into Re-apply mode. Then change the easing dropdown to Custom, use the Easing Editor, click Apply inside the modal, and finally click Re-apply on the main panel to save the new curve back onto that existing animation.

Open the camera — Click Animate Stage (video icon) in the top toolbar, or open App Search (Ctrl+/) and type "stage camera". A cyan dashed rectangle appears on the stage with the area outside dimmed — that's the camera frame at the current playhead time. The Stage Camera floating panel opens on the right.

Frame your first shot — With the playhead at 0 s, drag inside the rectangle to pan, or drag any corner handle to zoom (aspect ratio is locked). Use the cyan circle in the centre to scale from the middle. Mouse-wheel zooms around the cursor. Click Add Keyframe — your first frame is captured at 0 s.

Add a second beat — Click 1s ▶ in the panel (or scrub the timeline) to advance 1 second. Reframe — drag and zoom into a different area. Click Add Keyframe again. The camera now animates between the two frames.

Add 2–3 more keyframes — Step forward, reframe, Add Keyframe. If you click Add Keyframe at a time that already has a keyframe, the playhead auto-advances 1 s so each click captures a distinct frame.

Edit on the timeline — Yellow diamond markers appear on the timeline ruler at every camera keyframe. Click a diamond to jump, drag to retime, shift+click to delete. You can also edit each keyframe's time directly in the panel keyframe list (numeric input + jump-to + delete).

Apply & preview — Click Apply to commit (or Esc to cancel and discard). Press Space to play — the camera animates as the rest of the scene runs. Scrub the playhead manually too: the camera updates in real time.

Easing & undo — In the panel header pick the default easing for new keyframes (Linear, Ease In/Out, etc.). Each keyframe stores its own easing — change it from the keyframe row. All camera edits are covered by Undo/Redo (Ctrl+Z / Ctrl+Shift+Z) and are baked into the standalone HTML5 export.

Draw the path shape — This is the shape the object will travel along. Use an ellipse for a circular orbit, a freehand line for a flowing path, or the Draw Path tool (D) for a custom Bezier curve. Set its opacity to 0 in Properties to hide it during playback.

Add the mover object — Draw or import the object that should follow the path (airplane icon, ball, text). Its position doesn't matter — the path animation overrides it.

Apply path animation — Animate tab → Advanced → Path Animation. Click Pick Path Shape, click your ellipse/path on stage. Click Pick Mover, click your object.

Configure — Set Start % and End % (which segment to use). Enable Align to Path so the object rotates to face the direction of travel — essential for vehicles and arrows.

Loop it — Select the path animation bar in the timeline. Set Repeat to Infinite for continuous motion (orbiting planet, looping vehicle).

Set stage size first — Stage Settings (gear icon or right-click canvas). Set Width × Height to match your target: 1920×1080 for 16:9 video, 1080×1080 for Instagram square.

Preview before export — Click Preview in the toolbar for a full-screen preview outside the editor. Check all animations look right at final size.

Use Range Markers — Press I (In point) and O (Out point) in the timeline to export only a portion of the animation.