Lottie Animation

Lottie Animation plays a Lottie asset with configurable speed, trigger, looping, and frame range. Use it for a compact vector animation within the page.

Add and configure Lottie Animation

1. Click Add, choose Lottie Animation, and place it in the container.
2. Enter Content > Content > Asset Url.
3. Set Animation Speed and Trigger, then configure the related hover or playback options.
4. Review Loop Animation, Times to loop, and Frames.
5. Style Design > Wrapper and Borders.
6. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Asset Url	Enter the asset url.	Shared
Animation Speed	Set animation speed. Range: 0–3.	Shared
Trigger	Viewport, Click, Hover, None.	Shared
Hover Area	Animation, Section, Parent element. When: Trigger = Hover.	Shared
On Hover Out	Do nothing, Pause, Reverse. When: Trigger = Hover.	Shared
Reverse on finish	On/off. When: Trigger = Click, Viewport, None.	Shared
Loop Animation	On/off. When: Trigger = Click, Hover, None, Viewport.	Shared
Times to loop	Set times to loop. Range: 0–10. When: Loop Animation is set.	Shared
Frames	Set frames.	Shared

Design > Wrapper

Setting	Purpose and options	Behavior
Background Color	Color or supported fill.	Shared
Width	Width.	Responsive

Design > Borders

Setting	Purpose and options	Behavior
Borders	borders controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls.	See linked controls

Troubleshooting