> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/snap-to-place/lottie.md).

# 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)