Lottie - Flowboard

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