Lottie Files

Spruce up your app with custom looping or one-time animations from Lottie that are great for displaying confirmations, loading screens, or celebratory pop-ups!

Skill Level: Intermediate

Before You Begin

  • Ensure you have created a Lottie account and are logged in

  • Know that some Lottie files are free to download while others are paid

  • You do not need a paid Adalo plan to implement this feature

Walkthrough

Simple
In-Depth
Video
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 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.

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

Video

Results

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.

Learn More

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well! https://help.adalo.com/component-basics/marketplace-components/lottie-files