# 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

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