> For the complete documentation index, see [llms.txt](https://docs.santacruzsoftware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.santacruzsoftware.com/bannersui/guides/animation-and-gif-output.md).

# Animation and GIF Output

Animate supported layers, refine timing on the timeline, and generate GIF output.

Designers can add animation to supported layers while editing a template.

***

### Before you begin

Select a visible, unlocked, non-background layer.

Timeline controls appear only when timeline editing is enabled. GIF output is available only where configured.

### Animation setup path

1. Select a layer. The editor checks whether it supports animation.
2. In the Right Palette select <kbd>Animation</kbd>.
3. Select the target phase: **In**, **Loop**, or **Out**. Select the plus sign next to it.
4. Choose a static or motion behavior. Adjust timing, direction, easing, or location as needed.
5. Preview the motion before output.

{% hint style="info" %}
Animation is intended for ordinary visible layers. It is not supported for video layers, background layers, invisible layers, or layers where animation editing is locked.
{% endhint %}

#### Animation phases

Each animated layer can have three phases:

* **In**: How the layer enters.
* **Loop**: What the layer does while visible.
* **Out**: How the layer exits.

Each phase can be static, empty, or configured with a motion option and settings.

### Animation timeline

When timeline editing is enabled, the editor shows a timeline editor for the current artboard's animation.

Use it to see how animated layers line up over time. Adjust timing visually.

#### Timeline areas

* **Time ruler** — Shows seconds across the animation.
* **Layer rows** — Show one row per animated layer. Layer names remain visible while scrolling.
* **Playhead** — Shows the current preview time. Moving it updates the time field and preview.
* **Segments** — Colored blocks for the layer's In, Loop, and Out phases.
* **Delay area** — Empty time before a segment. Drag it to change when animation starts.
* **Segment edges** — Trim handles for adjusting a segment's start or end time.

Timeline segments use the same phase model as the animation palette:

* **In** segments show how a layer arrives.
* **Loop** segments show the layer's repeating or held behavior.
* **Out** segments show how a layer leaves.

The timeline is most useful when several layers animate together.

It lets designers stagger entrances, align motion between layers, shorten or lengthen phase timing, and confirm that nothing starts or ends too early.

### Timeline controls

Use timeline controls to preview and refine animation timing.

{% hint style="info" %}
Controls may be disabled when the artboard has no animation duration, when preview is not active, or when the selected layer cannot be animated.
{% endhint %}

| Control            | What it does                                               |
| ------------------ | ---------------------------------------------------------- |
| Play/Pause         | Starts or pauses preview from the current playhead time.   |
| Timeline slider    | Moves the playhead through the animation for quick review. |
| Nudge controls     | Moves the playhead backward or forward in small steps.     |
| Current time field | Sets or fine-tunes the exact playhead time.                |
| Copy current time  | Copies the playhead time for reuse in timing fields.       |
| Duration display   | Shows the total animation duration for the artboard.       |

To refine timing, navigate to the approximate moment, then use the time field or nudge controls for the exact position. Copy the current time when another timing field needs the same value.

### Animation quick reference

* Select a layer, then open the animation palette.
* Choose the **In**, **Loop**, or **Out** phase to change.
* Adjust the available behavior and settings, then apply the animation.

### Preview animation

Use **Preview Animation** to inspect motion before saving. Preview each animated artboard, especially when layouts differ by size.

### Delete animation

Select the animated layer and choose <kbd>Delete Animation</kbd> for the relevant layer or phase.

***

### GIF output

GIF output is available only for artboards with animation or video.

Select <kbd>Artboard Information</kbd> above the artboard.\
In the Right Palette, open <kbd>Artboard Properties</kbd>.\
Confirm that the artboard contains animation or video before opening GIF output.

To open the GIF output dialog:

1. Select <kbd>Artboard Information</kbd> directly above the artboard.
2. In the Right Palette, choose <kbd>Animation</kbd>.
3. Select the download icon to get the GIF output dialog.
4. Fill in necessary fields and choose <kbd>generate GIF</kbd>.
5. View a preview of the GIF, then select <kbd>Save</kbd> to finish generating.

The file is downloaded as a GIF file to your local device.

{% hint style="info" %}
Deselect all layers if the GIF output download icon is not visible.
{% endhint %}

The GIF dialog can include repeat behavior, quality, background color, dithering, frame generation, replay, and download controls.

* Use lower quality or fewer frames when file size matters.
* Use dithering when gradients show visible banding.
* Choose a background color that matches the intended placement.

Check duration, file size, layer visibility, and unsupported layer warnings before saving the final animated output.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.santacruzsoftware.com/bannersui/guides/animation-and-gif-output.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.