> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Use the names from the glossary at https://docs.visualradioassist.live/glossary: Audio Manager (two words), command (never commando), on air and off air (never live) for programs and studios, and server apps for the VRA apps installed in the studio.
> Say which app an answer applies to, like VRA Cloud, the Core or the Output Player, and the version when the page names one.
> Only give settings, values and steps that are in these docs. Never invent one. If the docs don't cover it, say so.
> When the docs don't answer the question, send the user to Visual Radio Assist support at https://cloud.visualradioassist.live/support.

# Animations

> Animate layers in and out of a visual with presets, then arrange their timing on the animations timeline in the Visual Designer.

Animations decide how the layers of a visual move when it goes on air and comes off air. Each animation is a bar on the animations timeline, grouped by layer. The timeline writes the animations as GSAP code in the visual's JS, and supported hand-written code shows on the timeline too.

## Open the animations timeline

Click the **Animations** button, the wand icon in the header of the [Visual Designer](https://docs.visualradioassist.live/visual-designer.md), or press **A**. The canvas shows **Animation mode** and the timeline opens below it. Click **Done** to close it.

The timeline has one row per layer. A layer can animate on four triggers:

* **In** - When the visual goes on air.
* **Out** - When the visual comes off air.
* **Item in** and **Item out** - When an item of a playlist layer appears or goes.

![](https://mintcdn.com/visualradioassist/cfPiQE-fjZkzRKZ8/images/visual-designer/animations/1.png?fit=max\&auto=format\&n=cfPiQE-fjZkzRKZ8\&q=85\&s=717c6dbb1c2ab75555dde8340a74f921)

## Add an animation to a layer

**1. Select a layer**

Select the layer on the canvas or in the layers panel.

**2. Choose a trigger**

Choose **In** or **Out** on the timeline.

**3. Pick a preset**

Click **Add to In**, or **Add to Out**, in the **Animations** panel and pick a preset.

The presets are **Fade**, **Scale**, **Slide** and **Wipe**, each in and out, and slide and wipe in four directions. You can also drag across an empty part of a layer's row on the timeline to draw a fade.

## Animate all layers at once

Click **Animate all layers** in the **Animations** panel and pick a pair, like **Slide up** or **Fade**. Every top-level layer gets an In and an Out animation, except Bodymovin layers and layers with code-only animations. The In animations start 0.1 s after each other, the Out animations run in reverse order.

When the visual already has animations, VRA asks before it replaces them. Undo brings them back.

## Animation settings

Select an animation to change it under **Animation settings**.

| Setting | What it does | Values | Default |
| - | - | - | - |
| **Animation** | The preset. | Any preset | - |
| **Feel** | How the movement accelerates. | **Smooth**, **Snappy**, **Overshoot** | **Smooth** |
| **Speed** | How long the animation takes. | From 0.05 s | 0.5 s for In, 0.3 s for Out |
| **Delay** | When the animation starts. | From 0 s | 0 s |
| **Distance** | How far a slide travels. Slide presets only. | From 1 px | 48 px |
| **Scale** | The size a scale starts or ends at. Scale presets only. | From 0% | 80% |
| **Ease** | Under **More**, the exact curve and direction. | **Linear**, **Ease**, **Sine**, **Expo**, **Back**, **Bounce**, **Elastic** | - |

An animation shows **Edited in code** when its code uses something the panel can't change. Click **Edit code** to change it in the JS.

## Arrange timing on the animations timeline

Drag a bar to move its start, for example to delay a layer. Drag an edge to change its duration. Bars snap to 0.01 s and to the edges of other bars, hold Alt to turn snapping off.

* Drag a bar onto another row to move it to that layer. Hold Cmd or Ctrl to copy it instead.
* The left and right arrow keys move the selected bar 0.01 s, with Shift 0.1 s.
* Cmd or Ctrl + D duplicates it, Delete removes it.
* Right-click a bar for **Edit in code**, **Duplicate** and **Delete**.

The length marker, like **In ends 1.20 s**, shows when the trigger ends. Drag it, or click the length in the time readout, like `0.00 / 1.20 s`, to set a **Length**. With animations on the trigger, a new length stretches or shrinks them all.

## Preview animations

Click play on the timeline, or press Space, to play or pause the preview. **Play from the start** restarts it from 0, **Loop preview** repeats it. The speed menu plays it at 0.25×, 0.5×, 1× or 2×. Loop and speed only change the preview.

Drag the playhead on the ruler to look at one moment. K pauses and L plays. With no bar selected, the left and right arrows step one frame, 1/25 s.

## Start animations from your own code

Click **New trigger** to animate on a custom event, like a score update. Give it a name and add animations to it as usual. The panel shows the line to start it from your JavaScript, like `visualLink.animations.emit("score-updated")`, and **Test trigger** to try it. See [Animation custom events](https://docs.visualradioassist.live/develop-with-vra/develop-visual-graphics/animation-custom-events).

## Hand-written animation code on the timeline

The timeline reads GSAP timelines and `gsap.to`, `gsap.from` and `gsap.fromTo` calls in the visual's lifecycle handlers. Code it can read but not change safely shows with a **Code only** badge. Other code stays in the JS and keeps working, but does not show on the timeline.

When the JavaScript has an error, the timeline shows **Fix the JavaScript to edit animations** with the line number. The last animations stay visible but can't be edited until you fix the line. See the [GSAP guide](https://docs.visualradioassist.live/develop-with-vra/develop-visual-graphics/gsap-animations-with-visual-radio-graphics.md) for writing your own.

## Convert old animations

A visual made before the timeline shows **Old animations** in the header and plays as before. Click **Convert animations** on the timeline to edit them. Save to update the visual on air.

Old animations can't be converted when the visual uses custom code, custom CSS animations, a playlist or a nested visual layer.

## Animate a Bodymovin layer on the timeline

A Bodymovin layer shows one bar per trigger. Drag it to start the In or the Out later. The markers in the Bodymovin file set its length. See [Bodymovin / Lottie animation layer](https://docs.visualradioassist.live/visual-designer/bodymovin-lottie-animation-layer.md).

## Related

* [Design your first visual](https://docs.visualradioassist.live/getting-started/design-your-first-visual.md)
* [Designer controls and shortcuts](https://docs.visualradioassist.live/visual-designer/designer-controls.md)
* [Animation custom events](https://docs.visualradioassist.live/develop-with-vra/develop-visual-graphics/animation-custom-events)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.