# Lottie Files
*Skill Level: Intermediate*
## Before You Begin
* Ensure you have created a [Lottie](https://lottiefiles.com/) account and are logged in.
* Verify Lottie Features are Supported on all Platforms you intend to use.
* You do not need a paid Adalo plan to implement this feature.
## Walkthrough
{% tabs %}
{% tab title="Simple" %}
**1.)** While in your Adalo app, click the big plus sign 
in the top left corner
**2.)** Enter **"Marketplace"** in the search bar, then click **Explore Marketplace**
**3.)** Find **Lottie** in the list and click **Install**, then click **Done**
**4.)** Back in the components list, enter **Lottie** in the search bar, then click and drag the component onto the desired screen
**5.)** In a new browser tab, open the [Lottie website](https://lottiefiles.com/featured) to find an animation to add. You can also find this link in the **Lottie** dropdown within the component settings.
**6.)** Once you have found a suitable animation, click on it to open more options
**7.)** From this page, you can edit the speed of the animation, the background color, and (on some animations) the colors of the animation itself. If the animation is suitable to you as is, click the **Download** button in the top right, select the **Lottie JSON** option to download the animation, and skip to step **11** of this guide.
**\*\*Before you download:** **Ensure JSON compatibility using the *****'Feature Support Checker'***** as some features are not available on all platforms.**
**8.)** Click on the **Edit Layer Colors** button to go into the Lottie editor. A new browser tab will open where you can edit the background color, animation speed, and animation colors. If the animation colors are editable, you will see color swatches along the right-hand side that you can edit.
**9.)** To edit a color, click on it and a color picker will appear. Choose the color you want to use, then click **Update**
**10.)** Once the colors and other animation settings are to your liking, click the **Export as Lottie JSON** dropdown in the bottom right corner, then click the download icon 
**11.)** Find the downloaded animation on your computer (most likely in your downloads folder) and open it with a text editor:
* On PC, you can open the file with Notepad (right click and choose **Open With** > **Choose Another Program** > **Notepad**)
* On Mac, you can open the file with TextEdit (double click the file)
**12.)** Copy all the text in the file and paste it into the Adalo Lottie component's input labeled **LottieFiles JSON**
**13.)** In the component settings under the **Animation** section, you can also toggle animation looping, Builder preview, and add click actions to the Lottie component.
{% endtab %}
{% tab title="In-Depth" %}
**1.)** While in your Adalo app, click the big plus sign in the top left corner
**2.)** Enter **"Marketplace"** in the search bar, then click **Explore Marketplace**
**3.)** Find **Lottie** in the list, click **Install**, then click **Done**
**4.)** Back in the components list, enter **Lottie** in the search bar, then click and drag the component onto the desired screen
**5.)** In a new browser tab, open the [Lottie website](https://lottiefiles.com/featured) to find an animation to add. You can also find this link in the **Lottie** dropdown within the component settings.
**6.)** Once you have found a suitable animation, click on it to open more options
**7.)** From this page, you can edit the speed of the animation, the background color, and (on some animations) the colors of the animation itself. If the animation is suitable to you as is, click the **Download** button in the top right, select the **Lottie JSON** option to download the animation, and skip to step **11** of this guide.
**8.)** Click on the **Edit Layer Colors** button to go into the Lottie editor. A new browser tab will open where you can edit the background color, animation speed, and animation colors. If the animation colors are editable, you will see color swatches along the right-hand side that you can edit.
**9.)** To edit a color, click on it and a color picker will appear. Choose the color you want to use, then click **Update**
**10.)** Once the colors and other animation settings are to your liking, click the **Export as Lottie JSON** dropdown in the bottom right corner, then click the download icon .
**11.)** Find the downloaded animation on your computer (most likely in your downloads folder) and open it with a text editor:
* On PC, you can open the file with Notepad (right click and choose **Open With** > **Choose Another Program** > **Notepad**)
* On Mac, you can open the file with TextEdit (double click the file)
**12.)** Copy all the text in the file and paste it into the Adalo Lottie component's input labeled **LottieFiles JSON**
**13.)** In the component settings under the **Animation** section, you can also toggle animation looping, editor preview, and add click actions to the Lottie component. Don't forget you can also change the size and shape of the animation by adjusting the handles on the yellow bounding box.
{% endtab %}
{% tab title="Video" %}
{% embed url="" %}
{% endtab %}
{% endtabs %}
## Example
Now your app has some fancy animations to enrich your users' experience! Use these on confirmation screens, notification icons, or celebratory pop-ups!
For a cloneable link to the app in this tutorial, [click here](https://previewer.adalo.com/eae44c63-814f-45db-b72c-17dd3746f6a3).
## Learn More
* You can make, upload, and even [sell](https://iconscout.com/become-contributor?redirect=https%3A%2F%2Fcontributor.iconscout.com%2F%3Futm_source%3Dlottiefiles) your own Lottie animations [for free](https://www.youtube.com/watch?v=zoBMb72UDeI) or [using Adobe After Effects](https://www.youtube.com/watch?v=72qbebvwxnY).
* If you need a custom animation, you can reach out to Adalo component makers such as [Complab](https://complab.io) to have one made. You can also ask for assistance in our [community forum](https://forum.adalo.com).
## Help
If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!