# Lottie Animation

The **Lottie Animation** widget plays vector animations from Lottie JSON files.\
It’s a powerful way to add smooth, high-quality animations to your app with **small file sizes** and **scalable graphics** that look sharp on all screen densities.

You can use it for success states, empty states, onboarding, loaders, and delightful micro-interactions throughout your app.

{% embed url="<https://www.youtube.com/watch?v=bhhS_HO3dzA>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=bhhS_HO3dzA>

### Core Concepts

The Lottie Animation widget:

* Loads a **Lottie JSON file** (vector animation) from:
  * A **network URL**, or
  * A **local asset** bundled with your app.
* Renders the animation as a widget with configurable `width`, `height`, and `fit`.
* Controls **how** and **how long** the animation plays using:
  * `animate`
  * `animationType`
  * `frameRate`

Since Lottie animations are vector-based:

* They stay **crisp and smooth** at any size.
* File sizes are much smaller than equivalent video or GIF.
* They’re ideal for modern, lightweight UI animations.

### Properties

| Property        | Description                                                                                                              |
| --------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `sourceType`    | The source of the Lottie file. Can be `network` (from a URL) or `asset` (from local project files).                      |
| `lottiePath`    | The URL or asset path for the Lottie JSON file.                                                                          |
| `width`         | The width of the animation widget.                                                                                       |
| `height`        | The height of the animation widget.                                                                                      |
| `fit`           | How the animation should be inscribed into the widget's bounds (e.g., `contain`, `cover`).                               |
| `alignment`     | The alignment of the animation within its bounds.                                                                        |
| `animate`       | If `true`, the animation will play automatically.                                                                        |
| `animationType` | The playback mode: `loop` (repeats indefinitely), `once` (plays one time), or `boomerang` (plays forward then backward). |
| `frameRate`     | The frame rate at which to play the animation.                                                                           |

### Default Properties

The Lottie Animation widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases

Use **Lottie Animation** when you want to:

* **Delightful Loading & Empty States**
  * Animated loaders instead of plain spinners
  * Fun illustrations for “No data”, “No internet”, or “Success” states
* **Micro-interactions**
  * Like/heart animations on tap
  * Button press, toggle, or success tick animations
  * Animated checkmarks, confetti, or subtle icon motions
* **Onboarding & Walkthroughs**
  * Animated visuals on onboarding screens
  * Feature highlights with motion to draw attention
* **Branding & Visual Polish**
  * Logo reveals, transitions, and branded animations
  * Animated headers or backgrounds to make screens feel premium


---

# 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.digia.tech/ui-building-blocks/widgets/media-async-widgets/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.