# Lottie Animation

## 🎞️ Lottie Animation Component in Lowcoder

The **Lottie Animation** component in Lowcoder enables you to effortlessly embed lightweight, scalable, and high-performance animations into your apps. Built to support JSON-based animations from [LottieFiles](https://lottiefiles.com/), this component enriches the visual experience without compromising performance.

### ✨ Overview

Lottie animations are rendered from `.json` files exported from Adobe After Effects using the Bodymovin plugin. Lowcoder's **Lottie Animation** component simplifies the integration of these animations into your applications through a declarative interface.

<figure><img src="/files/tUZoAZtgpknXfSwFgwsq" alt=""><figcaption></figcaption></figure>

### 🔧 Key Features

* **Lightweight & Vector-Based**: Crisp animations that scale perfectly across devices.
* **AutoPlay & Looping**: Supports auto-start and continuous looping with toggle controls.
* **Playback Control**: Pause, resume, and reset animations programmatically.
* **Responsive**: Adapts fluidly to parent container sizes.

### 🛠 Configuration Options

<table><thead><tr><th width="192.26171875">Property</th><th>Description</th></tr></thead><tbody><tr><td>Lottie JSON</td><td>Paste the whole JSON Lottie code</td></tr><tr><td>AutoPlay</td><td>Start animation immediately on render. (Boolean toggle)</td></tr><tr><td>Loop</td><td>Loop the animation continuously. (Boolean toggle)</td></tr><tr><td>Speed</td><td>Adjust animation playback speed (e.g., <code>1</code> is normal speed, <code>2</code> is double).</td></tr><tr><td>Value</td><td>Returns an Object, which contain all the info about the JSON Lottie</td></tr><tr><td>Hidden</td><td>Returns True or False based on whether the JSON Lottie component is hidden or not</td></tr></tbody></table>

### Component Playground

On Component Playground, you can interact with the Lottie Animation component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Lottie Animation component.

{% embed url="<https://app.lowcoder.cloud/playground/jsonLottie/1>" %}

### Component Auto-Docs

In the Auto-Docs of Lottie Animation component, we have shown how to use different properties of the Lottie Animation component. It also includes the Styling properties of the Lottie Animation component.

{% embed url="<https://app.lowcoder.cloud/components/jsonLottie>" %}

### 🧩 Use Cases

* Visual onboarding sequences
* Loading indicators
* Success/error confirmations
* Animated icons and storytelling UI

By using the **Lottie Animation** component, you can deliver delightful micro-interactions and rich motion graphics to your Lowcoder apps with zero custom code.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/app-editor/visual-components/multimedia-and-animation/lottie-animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.