# Animated component

This UI Component is used for displaying and interacting with something called Lottie JSON Files.

Lottie JSON files may for example be downloaded from [lottiefiles.com](https://lottiefiles.com/). Once downloaded, you may add the file as a Resource File in Appfarm Create, and connect it to your Animated Component.

The Animated Component has a few settings:

* **Source**: This is where you select the Lottie JSON file
* **Play**: The default value is `true` meaning that the animation will play automatically. However you may e.g. bind this property to an App Variable (e.g. `App variables.Play animation`, a bool variable) and toggle this variable with a Play/Pause button.
* **Loop**: You may select `true` in this property to make the animation loop forever. 
* **Speed**: The default value is 1, meaning play the animation at default speed. You may increase or decrease the speed with this property.

{% hint style="info" %}
A full example setup of Animated Component is available in our [Showroom](https://showroom.appfarm.app/ui-components/animated-component)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

There are two event handlers, **On Load** and **On Complete**. **On Load** is often used to display a loader when content has not yet loaded, by toggling a value when the component has loaded, e.g. On View Load set "loaded = true",  then On Load set "loaded = false". The event will trigger after the content has loaded.

{% hint style="info" %}
**On Complete** does not trigger for animations that loop.
{% endhint %}

 


---

# 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.appfarm.io/library/ui-components/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.