# 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FpVIXHjxLH5O4rFuAzjL4%2FRPReplay_Final1678907764-_1_.gif?alt=media&#x26;token=1662c860-f411-483f-9d5c-1316732af2e6" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FoaXjc4jyfUG4EHlT6cAx%2FRPReplay_Final1678908068.gif?alt=media&#x26;token=a00c9440-66f3-45a2-9d1d-c103ca3d3ac1" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FaCr5nusUb2b3nzdQUnqh%2FScreen-Recording-2023-03-16-at-14.05.20.gif?alt=media&#x26;token=6f37a5e9-f8ed-4210-925f-6d19d2213d53" 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>" %}