Atomic Element · Pro
Tie a Lottie animation to the scrollbar, play it on hover or click, or let it follow the cursor. Load the JSON from your Media Library or a URL, and place it like any other Elementor 4 atomic element.
The short answer
The Lottie element is an Elementor 4 Atomic Element from Animation Addons for Elementor that plays Lottie animations with interaction. It supports scroll-scrubbed playback, hover interaction, click interaction and cursor-driven animation, so a lightweight vector animation responds to the visitor instead of only looping. It runs on Elementor Free with Animation Addons Pro.
Plenty of "Elementor V4 compatible" addons are classic v3 widgets that still run on V4. The Lottie element is a native Atomic Element, built on Elementor's Atomic Editor architecture.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element (one panel element with an internal player part) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Interactions | Scroll-scrubbed, hover, click, cursor-driven |
| File source | A Lottie .json URL: paste one, or pick or upload it through the Media Library button |
| Uploading .json | WordPress blocks .json uploads by default; the upload works when Elementor's "Enable Unfiltered File Uploads" setting is on. Pasting a URL always works |
| Extensions | Regular Animation, Parallax, Tilt, Mouse Move, Custom CSS and the other shared extensions apply to the element |
| Starter templates | Since Pro 4.3.2, template imports store their Lottie files on your site instead of the demo server |
| Requires | Animation Addons for Elementor (free) + Animation Addons Pro |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Lottie, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A tall section where an illustration of the phone builds itself as the visitor scrolls down and comes apart as they scroll up. Three short text blocks scroll past on the left while the illustration stays in view on the right.
Six cards in a 3 × 2 Grid, each with a small line-art icon that plays when the pointer enters the card and rests otherwise.
A heart beside each recipe title that bursts when tapped, and a bell that rings when the visitor taps "Notify me".
A mascot in the hero turns its head from left to right as the cursor crosses the screen.
A wide diagram whose boxes and arrows animate in sequence while the section scrolls sideways, explaining a workflow without video.
A loose abstract shape beside the hero headline that drifts with the mouse and morphs as the visitor scrolls the first screen.
Features
Every option below is a real control in the Lottie panel or part of how the element renders. Nothing here needs custom code.
Scroll-scrubbed playback ties frames to the scrollbar, forward and back. Hover and click play the animation on interaction. Cursor-driven playback maps frames to the pointer position. One element, four behaviours, chosen per instance.
Paste a URL to a .json file or use the Media Library button to pick one. Uploading .json through the picker needs Elementor's "Enable Unfiltered File Uploads" setting; when it is off, the control tells you so and the URL field still works.
Starter-template imports store their Lottie files locally since Animation Addons Pro 4.3.2, so a site built from a template does not depend on the demo server to show its animations.
The Lottie element accepts the shared extensions: Parallax, Tilt, Mouse Move, Regular Animation, Custom CSS and more. Layer a drift or a tilt over the Lottie's own playback.
Lottie sits in the Atomic Elements panel, takes size and spacing from the Style tab, and works with Classes and Variables, so every Lottie on the site can share one sizing Class.
Built on the atomic base
Why it mattersLottie is one focused element. Drop it into any Flexbox, Grid or card, size it with a shared Class, and reuse that sizing everywhere.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor on.
Find Lottie under the Animation Addons atomic elements and drag it onto the canvas.
Paste your Lottie .json URL, or click the Media Library button to pick or upload one.
Choose how it plays: scroll-scrubbed, hover, click or cursor-driven.
Set width and spacing in the Style tab and save them as a Class.
Publish and test on desktop and a phone.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro Lottie (classic widget) | Animation Addons Lottie |
|---|---|---|
| Requires Elementor Pro | Yes | No (needs Animation Addons Pro) |
| Native Elementor 4 atomic element | No, classic widget | Yes |
| Scroll-linked playback | Yes, (Scroll trigger) | Yes, (scroll-scrubbed) |
| Hover and click | Yes | Yes |
| Cursor-driven playback | Not among its triggers | Yes |
| Styled with Classes and Variables | No | Yes |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Lottie widget is the more complete player, with loop, speed, reverse, start and end points, renderer choice and lazy load. Choose Animation Addons Lottie when you build in the Atomic Editor without Elementor Pro, or when you want cursor-driven playback.
Who it's for
The people who get the most out of it, and what they use it for.
Explaining a product with scroll-driven illustrations.
Handing After Effects work to the web as Lottie.
Using mascots and playful micro-interactions.
Shipping animated Elementor 4 kits whose files install locally.
FAQ
In Elementor 4, drag the Lottie element from Animation Addons for Elementor onto the page. Paste a Lottie JSON URL or pick the file from the Media Library, then choose scroll-scrubbed, hover, click or cursor-driven playback. Set the size in the Style tab and publish. The Lottie element needs Animation Addons Pro but not Elementor Pro.
WordPress blocks .json uploads by default. In Elementor 4, the Animation Addons Lottie element's Media Library button can upload JSON once Elementor's "Enable Unfiltered File Uploads" setting is on, and the control shows a notice when it is off. You can also host the file elsewhere and paste its URL instead.
Yes. The Animation Addons Lottie element supports scroll-scrubbed playback, which ties the Lottie's frames to the scroll position: forward as the visitor scrolls down, backward as they scroll up. Pair the Lottie element with the Sticky extension on its column to hold the animation in view while text scrolls past.
Phones and tablets have no hover or cursor, so hover-triggered and cursor-driven Lottie animations have nothing to react to on touch screens. For an Animation Addons Lottie that must play on mobile, choose scroll-scrubbed or click playback, or use a hover icon only where the motion is decoration rather than content.
Lottie files are vector JSON and usually far smaller than video or GIF for the same motion. Keep each file small, avoid raster images embedded in the animation, and limit how many play above the fold. Animation Addons Pro adds Reduced Motion settings and compatibility with LiteSpeed Cache and WP Rocket for animated pages.
A Lottie animation is visual decoration, so put any message it carries in real text next to it, such as a heading or paragraph. Animation Addons Pro includes Reduced Motion settings for visitors who ask their device for less movement. Avoid relying on a Lottie animation alone to explain a step or a state.
No. The Animation Addons Lottie element needs Animation Addons for Elementor and Animation Addons Pro, but not Elementor Pro, and runs on Elementor Free with the Atomic Editor on. With only the free plugin, Lottie shows as a locked card in the panel with an upgrade link.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Lottie on the same page or template.
Scroll, hover, click and cursor-driven Lottie as a native Elementor 4 element. Need something free? Elementor's own SVG element shows a static vector illustration.
