# Lottie-animated component

This feature will give dynamism to your components and will enhance the quality of your app! Now you can easily set states by using [dotLottie](https://dotlottie.io/) and [Lottie animations](https://lottiefiles.com/) instead of regular states. 

## :point\_right: The tags

:round\_pushpin:**Where to add the tags:** A rectangle layer

These are the tags you can use in the design file to implement the toggle component. 

<mark style="color:red;">`[component:stateful-lottie:<url>]`</mark>

<mark style="color:red;">`[component:input-stateful-lottie:<url>]`</mark>

{% hint style="info" %}
These tags support only URLs ending in **.json**
{% endhint %}

**Available use cases:**

{% tabs %}
{% tab title="Menu icons in tab menu" %} <mark style="color:red;">`[component:stateful-lottie:`</mark><mark style="color:blue;">`<url>`</mark><mark style="color:red;">`]`</mark>

<figure><img src="/files/9v8lwXfUVwlYw8l1y5K5" alt=""><figcaption></figcaption></figure>

Example: \
`[component:stateful-lottie:`*<mark style="color:blue;">`https://assets8.lottiefiles.com/packages/lf20_ei7frqcx.json`</mark>*`]`
{% endtab %}

{% tab title="Checkbox in forms" %} <mark style="color:red;">`[component:input-stateful-lottie:`</mark><mark style="color:blue;">`<url>`</mark><mark style="color:red;">`]`</mark>

<figure><img src="/files/cDVgsdS7cZOBA6UYz3PA" alt=""><figcaption></figcaption></figure>

Example:&#x20;

`[component:input-stateful-lottie:`<mark style="color:blue;">`https://assets10.lottiefiles.com/packages/lf20_vjcdl7ee.json`</mark>`]`
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
In contrast to the stateful components created with variants, remote actions can't be bound to each of the component states. Therefore, **features like favorites/like buttons aren't supported** with Lottie animations at the moment.
{% endhint %}

## Optional tag

#### Add a custom frame &#x20;

Add a custom frame to the tag that defines where the active animation is.

<mark style="color:red;">`[component:stateful-lottie:<url>:`</mark><mark style="color:blue;">`<custom-frame>`</mark><mark style="color:red;">`]`</mark>

<mark style="color:red;">`[component:input-stateful-lottie:<url>:`</mark><mark style="color:blue;">`<custom-frame>`</mark><mark style="color:red;">`]`</mark>

It's the frame where the animation changes. Setting a custom frame, sets the active animation from 0 to <`custom-frame>`, and the default animation from `<custom-frame>` to end. If no frame is specified, the animation will go from 0 to end.

In this example:\
\
The Lottie animation frame goes from 0 to 180. We will set a `<custom-frame>` of 90 as it's where we want the animation to stop.

<mark style="color:red;">`[component:input-stateful-lottie:<url>:`</mark><mark style="color:blue;">`90`</mark><mark style="color:red;">`]`</mark>

The animation plays as follows:\
To enable, on tap, the animation plays from 0 to 90,\
To disable, on tap, the animation plays from 90 to end.

<figure><img src="/files/mzxIKq4frXdQsM0FYqh4" alt=""><figcaption></figcaption></figure>

## How to add the tag

Check our LottieFile guide to see how to add Lottie URLs.&#x20;

{% embed url="<https://docs.bravostudio.app/bravo-tags/interactive-component/component-lottie#option-1-figma-only>" %}

## :floppy\_disk: Example files

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/1217802397157289523>" %}


---

# 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://docs.bravostudio.app/bravo-tags/components/lottie-animated-component.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.