Animations

The Animate tab in the element editor lets you configure per-layer animations for video renders. Select any layer and switch from the Design tab to the Animate tab to access animation controls.

Visibility Timing#

Control when a layer appears and disappears in the video timeline.

Layers are hidden outside their visibility window, so you can choreograph elements appearing and disappearing at different points in the video.

Enter Animation#

The animation that plays when the layer first appears (at its Show At time).

Available Types#

Enter Options#

• Duration — How long the entrance takes (0.1s – 10s, default 0.5s)
• Easing — The acceleration curve: Linear, Ease, Ease In, Ease Out, Ease In Out, Spring
• Custom Values — Some animations expose additional parameters (e.g., slide distance, scale factor)

Exit Animation#

The animation that plays when the layer disappears (at its Hide At time). Same types as enter, but in reverse:

Exit options (duration, easing, custom values) work identically to enter options.

Preview#

Click Preview Animation to play the enter and exit animations directly on the canvas. The preview auto-plays whenever you change any animation value.

Multi-Layer Editing#

When you select two or more layers, the Animate tab applies changes to all selected layers at once:

• Changing any animation property (enter type, exit duration, easing, etc.) updates all selected layers
• Preview Animation plays the animation on all selected layers simultaneously, respecting each layer's individual showAt timing

Stagger Delay#

When multiple layers are selected, a Stagger Delay section appears. This lets you create choreographed sequences where layers animate in one after another.

How It Works#

1. Delay Between — Set the time gap between each layer's entrance (e.g., 0.2s)
2. Animation Order — A drag-and-drop list of your selected layers. Reorder them to control which layer animates first
3. Apply Stagger — Writes incremental showAt values to each layer based on its position in the list

For example, with 3 layers and a 0.2s delay:

After clicking Apply Stagger, each layer's Show At is set automatically. Combined with an enter animation like Fade In, this creates a cascading entrance effect.

Copy & Paste Animations#

Right-click any layer to access Copy Animation and Paste Animation in the context menu. This copies the full animation configuration (enter, exit, timing) from one layer to another.

How Animations Render#

Animations are applied during video generation. What you see in the editor preview is exactly what you get in the rendered output.

• Animations render at full frame accuracy — every frame is precise, with no dropped or skipped transitions
• All configured animations are included automatically in video output formats (mp4, webm, gif)
• Total video duration is calculated from the longest layer timeline (including its enter/exit animations), with a minimum of 0.5 seconds

API Usage#

Animation properties are part of the template configuration and render automatically — no additional API parameters needed. The video output (mp4, webm, gif) includes all configured animations.

You can override transition values via the API using the style parameter syntax:

{
  "templateId": "your-template-id",
  "modifications": {
    "title": "Hello World",
    "title.showAt": 0.5,
    "title.hideAt": 3,
    "title.enterType": "fadeIn",
    "title.enterDuration": 0.8,
    "title.exitType": "fadeOut"
  }
}