Media · Elementor
Lottie Animations widget for Elementor
A Lottie animation with speed, loop, and trigger controls — lighter than a video for motion in a section.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A Lottie animation with speed, loop, and trigger controls — lighter than a video for motion in a section.
render() writes HTML data attributes: data-json-url, data-settings.
The widget script reads data attributes: data-json-url, data-settings.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Lottie Animations”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “File Source”, “Animation JSON URL”, “Upload JSON File”, “Autoplay”. Style and Content tabs are listed on this page.
When to use it
- An empty-state illustration.
- A hero micro-animation.
- A loading or success motion.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Settings — File Source | The chosen value is read in render() and applied on the front end. Options: External URL; Media File. |
| Settings — Animation JSON URL | Get JSON code URL from here. |
| Settings — Upload JSON File | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Settings — Autoplay | Passed through to Swiper autoplay. |
| Settings — Loop | Switcher inspector control (`loop`). |
| Settings — Reverse | Switcher inspector control (`reverse`). |
| Settings — Animation Speed | Numeric value used in this widget’s render/JS (default 1, min 0.1, max 3). |
| Settings — Trigger | The chosen value is read in render() and applied on the front end. |
| Settings — Viewport | Spacing/size control. |
| Settings — Size | Spacing/size control (min 1, max 800). |
| Settings — Rotate (degrees) | Set rotation value in degrees. |
| Settings — Alignment | Choose inspector control (`animation_align`). |
| Settings — Render As | The chosen value is read in render() and applied on the front end. |
| Settings — Wrapper Link | When this switch is on, render() outputs the wrapped markup. |
| Settings — Link Type | The chosen value is read in render() and applied on the front end. |
| Settings — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Settings — Existing Page | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Animation (Normal) — Opacity | Spacing/size control (min 0.10, max 1). |
| Animation (Normal) — Transition Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Animation (Normal) — Css Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-lottie-animations`. |
| Animation (Hover) — Opacity | Spacing/size control (min 0.10, max 1). |
| Animation (Hover) — Css Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-lottie-animations:hover`. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Lottie Animations actually change on the page?
A Lottie animation with speed, loop, and trigger controls — lighter than a video for motion in a section. Inspector labels from this widget’s PHP include “File Source”, “Animation JSON URL”, “Upload JSON File”, “Autoplay”.
How do I add Lottie Animations in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Lottie Animations”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Image Hotspots
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Vertical Scrollable Image
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Lottie Animations after you activate it.