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

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn672GNpMfu0QdOgsh%2Fanimation-lottie-%E2%9C%95-fig-1.gif?generation=1524497158603118\&alt=media)

## 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="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MBIx_GIV4A0DkdoiaQr%2F-MBIxt-Lr14u9_KkqtFr%2Flottieclick.png?alt=media&#x26;token=16331e7e-5705-4430-a12e-2a867dc8c88f" 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.).