> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add Lottie animations

**This is how you can add Lottie animations to your projects and edit them directly in TeleportHQ.**

|    |    |    |    |
| --- | --- | --- | --- |
| [1. Add Lottie element to canvas](#2-add-lottie-element-to-canvas) | [2. Copy animation URL](#2-copy-animation-url) | [3. Add URL to source](#2-add-url-to-source) | [4. Editing Lottie animations](#2-editing-lottie-animations) |

## Add Lottie element to canvas

* Go to the **Left panel**, in the **Elements tab** 
* From the **Media section** take the **Lottie element** and **drag** it to the container where you want to have the animation.

## Copy animation URL

* Go to [https://lottiefiles.com/](https://lottiefiles.com/)
* Select the animation you want to add to your project 
* **Copy the address** from the **Lottie Animation URL section** to your clipboard.

## Add URL to source

* Select the **Lottie element** you previously added to the canvas
* In the **Right panel** in the **Attributes** section, paste the URL from the clipboard into the **src** field.

## Editing Lottie animations

To edit the animation:

* Go to the **Right panel** and 
* From the **Visual tab** you can use all of the options.

In the **Attributes** section you can add Autoplay or Loop to the animation, change the speed at which it plays, add a background color or make the animation run on Hover.

Use the other sections in the Visual tab to edit the animation like any other element in TeleportHQ. For example you can change the** size, position, margin, padding**, etc.

![Adding and editing Lottie animations](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/lottie-animations_1799emy.gif)

||| You cannot edit the colors of the animation from TeleportHQ. You can do that in Lottie before adding it to the project.

To learn more about using animations in TeleportHQ check out this [article](/en/article/how-can-i-add-animations-to-my-website-1l7bk5m/).