← All widgetsWidget 192 · emcp_custom_192

Lottie Player

Elementor widget6 layouts15 content options13 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: lottie, animation, json, motion, bodymovin.

Setup guide

  1. Open a page in Elementor, search the panel for Lottie Player and drag it into a container.
  2. Content › Animation: Source, Animation URL, JSON File, Play, Loop, Reverse Direction, Bounce (play back and forth), Speed and 7 more.
  3. Pick a Play: Autoplay, When in viewport, On hover, On click (toggle), Scrub with scroll, Do not autoplay (first frame). Each one is shown below.
  4. Style tab sections: Size & Frame. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Conditional options: Animation URL appears when Source is url; JSON File appears when Source is media.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Autoplay

Play = autoplay

Lottie from URL, autoplay

Layout

When in viewport

Play = viewport

Lottie from URL, autoplay

Layout

On hover

Play = hover

Lottie from URL, autoplay

Layout

On click (toggle)

Play = click

Lottie from URL, autoplay

Layout

Scrub with scroll

Play = scroll

Lottie from URL, autoplay

Layout

Do not autoplay (first frame)

Play = none

Lottie from URL, autoplay

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Animation

OptionTypeChoices / rangeDefaultNotes
Source
source		DropdownExternal URL (.json or .lottie), Media Library (.json)url
Animation URL
url		Texthttps://assets2.lottiefiles.com/packa...Shown when source = url
JSON File
file		ImageShown when source = media
Play
trigger		DropdownAutoplay, When in viewport, On hover, On click (toggle), Scrub with scroll, Do not autoplay (first frame)autoplay
Loop
loop		Toggleon / offyes
Reverse Direction
reverse		Toggleon / off
Bounce (play back and forth)
bounce		Toggleon / off
Speed
speed		Numbermin 0.1, max 51
Start Delay (ms)
delay		Numbermin 0, max 100000
Start Frame (%)
start		Numbermin 0, max 1000
End Frame (%)
end		Numbermin 0, max 100100
Renderer
renderer		DropdownSVG, Canvassvg
Link
link		Link
Caption
caption		Text
Accessible Label
aria		TextAnimation

Style tab

Size & Frame

OptionTypeChoices / rangeDefaultNotes
Width
width		Slidermin 5, max 100, %/px100Responsive
Max Width
maxw		Slidermin 50, max 1600, px
Aspect Ratio
ratio		DropdownFrom the animation, 1:1, 16:9, 4:3auto
Alignment
align		Button groupLeft, Center, Rightcenter
Background
bg		Color
Padding
pad		Dimensions
Radius
radius		Slidermin 0, max 60, px/%0
Border
border		Border
Shadow
shadow		Box shadow
Filters
filter		Css_filter
Scale on Hover
hover_scale		Toggleon / off
Caption Typography
cap_typo		Typography
Caption Color
cap_color		Color#475467

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_192" and a settings object using the keys above. Run get-custom-widget with id 192 for the full JSON spec.