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!
Last updated
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!
Last updated
Skill Level: Intermediate
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.
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.
**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.
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.
You can make, upload, and even sell your own Lottie animations for free or using Adobe After Effects.
If you need a custom animation, you can reach out to Adalo component makers such as Complab to have one made. You can also ask for assistance in our community forum.
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
1.) While in your Adalo app, click the big plus sign in the top left corner
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 .
