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

# Lottie

> Use Lottie for lightweight animation that adds motion, feedback, or visual explanation.

## What it is

**Lottie** displays a lightweight animation inside the visual editor.

## What it's best for

Use it when motion helps explain a feature, celebrate progress, or make a transition feel more alive.

## When to use it

* Celebrate a completed step
* Show a feature in motion
* Add energy to an empty state
* Support a short transition while the next step prepares

## When not to use it

* Do not use motion when a static image would communicate just as well.
* Do not add looping animation everywhere. Too much motion can distract from the action you want.

## How to add it in the dashboard

1. Open the screen in the dashboard.
2. Add **Lottie** from the **Components panel**.
3. Select it on the **canvas**.
4. In the **properties panel**, choose the animation source, size, fit, and loop behavior.
5. Review the full screen to make sure the motion supports the message rather than competes with it.

## Key parameters

| Parameter              | What it changes                            | When to adjust it                                             |
| ---------------------- | ------------------------------------------ | ------------------------------------------------------------- |
| Source                 | Chooses where the animation comes from     | Use it when switching between library assets and hosted files |
| Animation source field | Sets which animation appears               | Change it when the screen goal changes                        |
| Width                  | Controls animation width                   | Use it when the motion should be more dominant or more subtle |
| Height                 | Controls animation height                  | Use it to balance the animation against copy and buttons      |
| Fit                    | Controls how the animation fills its frame | Change it when it feels cropped or too small                  |
| Loop                   | Decides whether the animation repeats      | Use it for ambient motion, disable it for one-time moments    |
| Margin                 | Adds space around the animation            | Use it to keep the layout calm and readable                   |

## Example use cases

* A celebratory success screen after onboarding completion
* A short feature explainer showing how a product workflow works
* A polished loading interstitial before a personalized result screen

## Best practices

* Use motion to guide attention, not to fill empty space.
* Keep the rest of the screen simple when animation is present.
* Choose animations with a clear connection to the message on the screen.

## Common mistakes

* Looping busy animations next to long text
* Using motion on every page of the flow
* Choosing an animation style that clashes with the rest of the brand

## Related components

* [Image](/components/image)
* [Loader](/components/loader)
* [Text](/components/text)
* [Stack](/components/stack)