# Animation Component

## Overview

The animation component is powered by [Lottie](https://airbnb.design/lottie/). It makes adding animations as easy as adding images. For designers, animations can be created in [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) or [Haiku](https://www.haiku.ai/) and imported as a `.json` file. For the rest of us, there is a large and growing community of designers who have [created free and editable animations](https://www.lottiefiles.com/community) that you can easily add to your app.

![](/files/-LAn672GNpMfu0QdOgsh)

## Video Tutorial

See a video tutorial for using animations in your Thunkable project here:

{% embed url="<https://www.youtube.com/watch?v=_rmW2kx1fV4>" %}

## Properties

### Animation

| Property  | Description                                             | Data Type  |
| --------- | ------------------------------------------------------- | ---------- |
| Animation | The name of the JSON animation file you want to display | Text       |
| Loop      | Toggle whether or not the animation loops               | True/False |

### Layout

| Property    | Description                                                                         | Data Type                                    |
| ----------- | ----------------------------------------------------------------------------------- | -------------------------------------------- |
| X           | Location of top left corner of animation on X-axis, where the left hand side is X=0 | Number                                       |
| Y           | Location of top left corner of animation on Y-axis, where the top side is Y=0       | Number                                       |
| Height      | Height of animation in pixels                                                       | Number                                       |
| Width       | Width of animation in pixels                                                        | Number                                       |
| Resize Mode | Define dimensions of the animation component.                                       | Select from list `[Stretch, Float in Place]` |

## Animation Blocks

### Event Block

#### **When Animation Click**

This event fires when the user clicks on the animation component. You can trigger actions to occur when the animation is clicked.

<div align="left"><img src="/files/-MBIxt-Lr14u9_KkqtFr" alt=""></div>

### Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.&#x20;

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.&#x20;

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).


---

# 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.thunkable.com/app-design/ui-components/media-components/lottie.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.