# How to create behavior animations

Behavior animations allow you to add looping animations to elements in your compositions. This can be particularly useful for adding a flare or other living hold to an overlay.

To add a behavior animation to a composition, follow the steps below. &#x20;

### 1. Add a behavior animation

1. Navigate to the in the composition tree and select a widget to add a behavior animation to.
2. Select the Behavior tab in the property panel to access the behavior animation controls.
3. Select the type of behavior animation you wish to add. (The type used in this example, Position X, makes the flare move horizontally).

<figure><img src="/files/uNGzjZaIEGdTCGVtiiE3" alt=""><figcaption><p>Adding a behavior animation</p></figcaption></figure>

### 2. Adjust the properties and values of the animation

After adding a behavior, you can adjust several of its properties to customize the animation to your needs.

* **Effect**: how you want the behavior to animate
* **Easing**: the speed curve of the animation
* **Value Min and Max**: the minimum and maximum values that the animation moves between, the duration of the animation, and the delay between each loop of the animation

In this example, the effect, easing, and min and max values are being set to make the flare pingpong horizontally at a certain speed and distance.

<figure><img src="/files/3JUDgsHp4ZCWuRRDaVtI" alt=""><figcaption><p>Refining behavior animation</p></figcaption></figure>

### 3. Toggle a behavior On and Off

* To toggle an animation On and Off, click the checkbox on the left of each behavior.
* To delete a behavior animation, select the **X** on the right.

<figure><img src="/files/o8KdEv9JexWCfdzCx4Wk" alt=""><figcaption><p>Toggling and deleting a behavior animation</p></figcaption></figure>


---

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

```
GET https://developer.singular.live/singular-basics/building-overlays-in-composer/animating-overlays/how-to-create-behavior-animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
