# Lottie Animation

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-72ecc823e33c43f22a2ca172527e9e1b538a21d4%2Fimage%20(18).png?alt=media" alt=""><figcaption></figcaption></figure>

## Basic

#### Lottie JSON

Provide the JSON content that renders the Lottie animation. Use the Lottie Editor to make the animation and export the JSON and load the content here.

## Interaction

#### Speed

Controls the speed at which the animation is played. It can be sped up to 10x times using this property.

#### Loop

| Property     | Description                                     |
| ------------ | ----------------------------------------------- |
| Single Play  | Plays the animation only once after loading it. |
| Endless Loop | Keeps playing the animation in an endless loop. |

#### Animation Start

| Property | Description                                                   |
| -------- | ------------------------------------------------------------- |
| Auto     | Starts to play the animation automatically after loading.     |
| On Hover | The animation is played only after the user hovers the mouse. |

#### Keep Last Frame Displayed

Displays the last frame of the animation static, after playing the entire content.

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the widget's background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr></tbody></table>