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
- Open the screen in the dashboard.
- Add Lottie from the Components panel.
- Select it on the canvas.
- In the properties panel, choose the animation source, size, fit, and loop behavior.
- 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