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

# Animation

The Animation component plays animated content — typically a Lottie animation — on a Flow screen. Use it to add motion to loading states, success confirmations, empty states, or illustrative content, without embedding video files.

## Overview

Point the component at a hosted animation file and it renders the animation inline on the screen. You control how the animation loops and how fast it plays, and you can size and space it like any other Flow component through the Style tab.

## Configuration

To configure it, click the component on the Flow screen. The **Edit Animation Component** panel opens on the right with two tabs: **Properties** and **Style**. The section below mirrors the Properties tab.

### Properties

* **Source** — the URL of the animation file to play. Point this at a hosted animation (for example a Lottie JSON file). You can bind it to a Flow variable or record field to switch the animation dynamically.
* **Animation Type** — how the animation plays back:
  * **Loop** *(default)* — plays continuously from start to finish, over and over.
  * **Once** — plays a single time and then stops on the final frame.
  * **Boomerang** — plays forward, then reverses back to the start, repeating.
* **Frame Rate** — the frame rate (frames per second) at which the animation plays. Lower it to slow the animation down, raise it to speed it up.

## Styling

The **Style** tab gives you control over the Animation's spacing, size, and framing. Configure it from the **Style** tab of the Edit Animation panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the animation and the component's edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set the component's width and height.
* **Min / Max Width / Height:** Constrain how small or large the component can grow.
* **Overflow:** Determine how content behaves when it exceeds the component's bounds.
  {% endtab %}

{% tab title="Border" %}
Customizes the border around the component.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, etc.).
* **Radius:** Corner rounding.
  {% endtab %}

{% tab title="Background" %}
Controls the component's background.

* **Color:** Background color shown behind the animation.
  {% endtab %}
  {% endtabs %}

## Troubleshooting Common Issues

* **Nothing appears where the animation should be** — The **Source** URL is empty, unreachable, or points to a file the browser can't load. Confirm the URL opens directly in a browser and that the host allows cross-origin requests (CORS) from your Salesforce domain.
* **The animation plays once and freezes** — **Animation Type** is set to **Once**, which stops on the final frame by design. Switch to **Loop** or **Boomerang** if you want continuous motion.
* **The animation runs too fast or too slow** — Adjust **Frame Rate**; the default rate comes from the animation file itself, and overriding it changes the playback speed.


---

# 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.avonnicomponents.com/flow/flow-components/animation.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.