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.

  • 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

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.

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

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.

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.

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

Last updated