# How do you use Lottie animations in Adalo?

Install Adalo’s current Lottie Files component, use compatible JSON, configure looping or completion actions, and protect accessibility and builder performance.

- Canonical URL: https://adalocado.com/answers/lottie-animations
- Verification: Verified from current public evidence
- Topic: Responsive Design
- Skill level: Beginner
- Last reviewed: 2026-08-13
- Index status: index-now

## Short answer

Install the documented Lottie Files component from Adalo’s Marketplace, paste compatible Lottie JSON, and configure looping, preview, or completion actions for a specific feedback state. Test every target platform and keep the same meaning available without motion.

Install the documented Lottie Files component from Adalo’s Marketplace, download a compatible Lottie JSON asset, and paste the JSON into the component. Decide whether the animation should loop, preview in the builder, respond to a tap, or run a completion action. Use motion to communicate a real state—loading, confirmation, progress, or celebration—and preserve the same meaning in text or static interface content.

The original walkthrough remains useful for its message-confirmation pattern, but current official instructions add an important compatibility gate: check the animation’s supported features on every intended platform before release. Keep looping animations limited and disable builder animation when a screen becomes difficult to edit. Test completion actions for duplicate firing and confirm that the experience still makes sense when motion is reduced or unavailable.

## Intended outcome

A purposeful animation that communicates state, completes predictably, and remains usable across target platforms.

## Requirements

- The current Lottie Files marketplace component
- A licensed Lottie JSON asset
- A defined loading, confirmation, progress, or celebration state

## Step by step

1. **Name the feedback**

   Decide exactly what state the animation communicates and write the accompanying non-motion message first.

2. **Install the component**

   Open Adalo’s Marketplace, install Lottie, and place the component on the intended screen.

3. **Check the asset**

   Download Lottie JSON only after its feature-support check covers every target platform.

4. **Paste and configure**

   Paste the JSON, then choose looping, builder preview, click actions, and animation-completion actions deliberately.

5. **Test completion**

   For a one-time confirmation, verify that the animation finishes once and the next action fires exactly once.

6. **Protect performance**

   Limit simultaneous loops and turn off builder animation if a Lottie-heavy screen becomes difficult to edit.

## Why it works

- Motion should clarify a state; a loop with no state change can make the interface feel stuck.
- A completion action belongs after the animation only when the underlying data action has already succeeded.
- Builder preview is an editing aid, not evidence that every native and web target renders the same feature set.

## Data model

| Collection | Properties | Relationships |
| --- | --- | --- |
| Optional UI state | Animation purpose, completion state, or related record status | Usually none; relate state only when the animation reflects persisted data |

## Common failures

### The animation does not render

Re-check JSON compatibility, paste the complete JSON, and test the same asset on each target platform.

### The builder becomes slow

Disable builder animation and reduce the number of components looping simultaneously.

### The next action runs twice

Test the completion path with instant navigation disabled and ensure only one component owns the action.

## Testing checklist

- [ ] The selected JSON passes the Lottie feature-support check for every intended platform.
- [ ] A one-time animation runs once and its completion action fires exactly once.
- [ ] Looping and builder preview settings match the purpose of the animation.
- [ ] A screen with several Lottie components remains usable in preview and while editing.
- [ ] JSON support is checked per platform
- [ ] Motion communicates a named state
- [ ] Meaning remains without motion
- [ ] Completion actions fire once
- [ ] Builder preview remains responsive

## Limitations

- This page is verified from current public documentation and forum evidence, not from a hands-on Adalo 3.0 reproduction.
- Lottie feature support varies by animation and target platform, so visual parity must be checked before release.
- Large or numerous continuously looping animations can make the builder slow even when the published app behaves differently.

## Community evidence

### [Editing of the app is really slow](https://forum.adalo.com/t/editing-of-the-app-is-really-slow/48947/4)

Adalo staff identify many continuously looping Lottie animations as a common cause of builder slowdown and recommend turning animation off in the builder. Boundary: The report concerns builder performance, not a universal runtime limit; test the actual target platforms separately.

## Sources

- [Adalo: Lottie Files](https://help.adalo.com/component-basics/marketplace-components/lottie-files)
- [Adalo: Marketplace Components](https://help.adalo.com/component-basics/marketplace-components)
- [Adalo forum: Lottie builder performance](https://forum.adalo.com/t/editing-of-the-app-is-really-slow/48947/4)
- [LottieFiles archive: Adalo tutorials](https://web.archive.org/web/20221209050820/https://lottiefiles.com/tutorials/tag/adalo)

Markdown version: https://adalocado.com/answers/lottie-animations.md