# Animations

> Add enter/exit animations, visibility timing, and staggered choreography to your template layers

- **URL**: https://orshot.com/docs/orshot-studio/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.

<div className="mb-4">
  <iframe
    width="100%"
    height="460"
    src="https://www.youtube.com/embed/uTWek6rVxe8"
    title="Style Parameters in Orshot Studio"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowFullScreen
    className="rounded-lg"
  ></iframe>
</div>

## Visibility Timing

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

| Property    | Description                                                        |
| ----------- | ------------------------------------------------------------------ |
| **Show At** | Time (in seconds) when the layer becomes visible. Default: `0`     |
| **Hide At** | Time (in seconds) when the layer disappears. Default: end of video |

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

| Type                            | Effect                                 |
| ------------------------------- | -------------------------------------- |
| **None**                        | No entrance animation                  |
| **Fade In**                     | Fades from transparent to opaque       |
| **Slide In Left/Right/Up/Down** | Slides in from the specified direction |
| **Scale In**                    | Scales up from a smaller size          |
| **Scale In Up/Down**            | Scales in while sliding vertically     |

### 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:

| Type                             | Effect                                |
| -------------------------------- | ------------------------------------- |
| **None**                         | No exit animation                     |
| **Fade Out**                     | Fades from opaque to transparent      |
| **Slide Out Left/Right/Up/Down** | Slides out in the specified direction |
| **Scale Out**                    | Shrinks away                          |
| **Scale Out Up/Down**            | Scales out while sliding vertically   |

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:

| Order | Layer    | Show At |
| ----- | -------- | ------- |
| 1     | Title    | 0.0s    |
| 2     | Subtitle | 0.2s    |
| 3     | Logo     | 0.4s    |

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:```json
{
  "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"
  }
}
```