Animation Editor

Opening the Animation Editor

Add an Animation Editor node to your canvas from the node menu. Click Open Animation Editor to enter the chat interface.

The Animation Editor with the AI chat panel on the left and a live animation preview on the right.

---

Required Settings Before You Start

Before asking the AI to generate anything, configure two settings — these define the canvas your animation will live on:

Layout Size

Set the aspect ratio and resolution to match your video. For vertical video, use 9:16. For horizontal, use 16:9.

Getting this right from the start matters — if you change the layout size after generating an animation, elements may shift or get cropped.

Duration

Set the total duration of the animation in seconds. This should match the clip or section it will be overlaid on.

Layout size and duration settings — configure these before generating anything.

---

Generating an Animation with AI

Type your request in the chat panel. Be as specific as possible about what you want — layout, colors, text content, animation style, timing.

For example:

Create a lower third with a white name tag that slides in from the left at 0.5 seconds. The name is "Sarah Chen" in bold, with "Head of Product" in a smaller subtitle below. Fade out at 4 seconds.

The AI generates the animation and renders it live in the preview panel. You can keep chatting to refine it — ask for color changes, different timing, new elements, or layout adjustments.

An AI-generated lower third animation rendered live in the preview panel.

---

Switching to WebM Mode (Transparent Background)

By default, animations render with a solid background. To make the background transparent — so the animation can be layered over video without a colored box behind it — you need to switch the export mode to WebM.

The easiest way to do this is to ask the AI directly:

Switch the export mode to WebM with a transparent background.

The AI will update the settings automatically.

The animation in WebM mode — the background is transparent, showing a checkerboard pattern in preview.

---

Using the Element Inspector

You don't have to ask the AI for every small change. The Element Inspector lets you directly edit individual elements in your animation — no chat needed.

Click any element in the preview panel to select it. The inspector panel shows all its properties:

• Text content — edit copy directly

• Colors — change fill, stroke, background

• Font — size, weight, family

• Position & size — precise numeric controls

• Timing — when the element appears and disappears

• Placeholders — mark a field as dynamic (see below)

The element inspector showing properties for a selected text element.

This is much faster than going back and forth with the AI for simple tweaks like changing a hex color or adjusting a font size.

---

Adding Placeholders in the Animation Editor

Just like in the main Editor, you can make fields in your animation dynamic — so they get filled with real data from your workflow at runtime.

This is useful when the animation contains text that changes between runs — names, stats, product titles, prices, etc.

How to add a placeholder

1. Select the element you want to make dynamic using the Element Inspector

2. Find the field you want to vary (e.g. the text content)

3. Click Set as Placeholder on that field

The field will be marked as a placeholder input. When you return to the canvas, the Animation Editor node will show an input handle for that placeholder — connect it to any upstream node output or Collections column.

A text field marked as a placeholder in the inspector, creating a dynamic input on the node.

---

Exporting and Using in a Workflow

Once your animation looks right:

1. Make sure WebM mode is on (if you need a transparent overlay)

2. Click Export or Save to finalize

3. Return to the canvas — the Animation Editor node now has an output

4. Connect its output to an Editor node input (via a placeholder in the Editor timeline)

5. In the Editor, position the animation layer above your video clips

The Animation Editor node connected to an Editor node, with the animation layered over the video.

---

What's Next?

• Editor — layer your animation on top of video clips in the timeline

• fal.ai Integration — connect your fal.ai account to enable AI generation nodes

• Best Practices — tips for dynamic animations and reusable templates