> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# #lottie — Lottie Animations

> Add beautiful Lottie animations to your app

The `#lottie` command imports Lottie animation files into your app. Lottie animations are lightweight, resolution-independent, and look sharp on every screen size — a far better option than GIFs for app animations.

## What It Does

When you use `#lottie`, the AI:

1. Adds the Lottie JSON animation file to your project
2. **Automatically adds the Lottie Swift package** as a dependency (if not already present)
3. Creates a view that plays the animation where you describe

<Note>
  Nativeline automatically adds the Lottie package to your project when you use `#lottie` for the first time. You don't need to set up any dependencies manually.
</Note>

## Supported Formats

| Format   | Notes                                                                                |
| -------- | ------------------------------------------------------------------------------------ |
| **JSON** | Lottie animation format (exported from After Effects or downloaded from LottieFiles) |

## Where to Get Lottie Animations

| Source                                               | Notes                                                                          |
| ---------------------------------------------------- | ------------------------------------------------------------------------------ |
| [LottieFiles](https://lottiefiles.com)               | Thousands of free and premium animations, searchable by category               |
| After Effects + Bodymovin                            | Export your own animations from Adobe After Effects using the Bodymovin plugin |
| [LottieFiles editor](https://lottiefiles.com/editor) | Customize colors and timing of existing animations in your browser             |

## How to Use

<Steps>
  <Step title="Type #lottie in the chat">
    Type `#` and select **lottie** from the toolkit popover.
  </Step>

  <Step title="Select your animation file">
    The file picker opens, filtered to JSON files. Choose the Lottie animation you want to add.
  </Step>

  <Step title="Describe where to show it">
    The file appears as an orange chip below the input. Tell the AI where and how to display the animation.
  </Step>

  <Step title="Send your message">
    Press Enter. The AI adds the Lottie dependency (if needed), bundles the animation, and displays it as described.
  </Step>
</Steps>

## Example Prompts

```
Use this as a loading spinner in the center of the screen
```

```
Play this animation when a task is completed
```

```
Show this animation on the empty state screen
```

```
Play this confetti animation when the user achieves a goal
```

```
Use this as the launch screen animation, play once then transition to the home screen
```

## Why Lottie Over GIFs?

|                   | Lottie                       | GIF                    |
| ----------------- | ---------------------------- | ---------------------- |
| **File size**     | Tiny (JSON-based)            | Large (pixel data)     |
| **Resolution**    | Scales perfectly to any size | Pixelates when scaled  |
| **Colors**        | Full color spectrum          | Limited to 256 colors  |
| **Performance**   | Rendered by GPU              | Decoded frame by frame |
| **Interactivity** | Can pause, reverse, seek     | Play only              |

<Tip>
  Lottie animations are lightweight and resolution-independent — much better than GIFs for app animations. A complex animation that would be several MB as a GIF is often just a few KB as a Lottie file.
</Tip>

## Common Use Cases

<AccordionGroup>
  <Accordion title="Loading indicators">
    Replace boring spinners with branded loading animations. Play them on loop while content loads.
  </Accordion>

  <Accordion title="Empty states">
    Make empty screens feel alive with a subtle animation instead of a static illustration.
  </Accordion>

  <Accordion title="Success confirmations">
    Play a checkmark or confetti animation when a user completes an action. These small moments of delight make your app feel polished.
  </Accordion>

  <Accordion title="Onboarding illustrations">
    Animate your onboarding illustrations to better explain features and hold user attention.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Toolkit Overview" icon="grid-2" href="/toolkit/overview">
    See all available # commands and how the toolkit works.
  </Card>

  <Card title="#image — Add Images" icon="image" href="/toolkit/image">
    Import static images into your app's asset catalog.
  </Card>
</CardGroup>