# Animation by Lottie

## Video Tutorial

{% embed url="<https://youtu.be/IS0cLh9XVC8>" %}

## Animation Overview

The Animation component powered by [Lottie ](https://airbnb.design/lottie/)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)

## Getting Started

| Property  | Description                                                                                                                                                                                                          |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Animation | Please upload and reference your After Effects `.json` animations to your app project.  You can create your own or find a library of open sourced ones from [sites like this](https://www.lottiefiles.com/community) |
| Loop      | If `true`, animation will run as a loop                                                                                                                                                                              |

## Edit Animation size

For more information on sizing in your app, please see our [introduction here​](https://docs.thunkable.com/~/edit/primary/thunkable-cross-platform/2-create/intro-to-sizing)

| Property | Description                                                                                                                                                                                                  |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Height   | `Fit contents` Container is just as large as the animation; `Fill container` Container is as large as it can be on the Screen; `Relative size` Size in percent of the Screen; `Absolute size` Size in pixels |
| Width    | `Fit contents` Container is just as large as the animation; `Fill container` Container is as large as it can be on the Screen; `Relative size` Size in percent of the Screen; `Absolute size` Size in pixels |

## Events

You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.

![](/files/-MBIxt-Lr14u9_KkqtFr)


---

# 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/snap-to-place/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.