How to set up and style the Lottie Animation widget in Elementor.
Lottie Animation plays a Lottie JSON file from your media library or from an external URL. You choose what starts it: page load, entering the viewport, hover, click, or the visitor’s scroll position. Use it for animated icons, illustrations and scroll-driven visuals.
Part of: Bright Addons Pro. Before you start: A Lottie animation in JSON format, either uploaded to the media library or hosted at a URL that allows cross-origin requests. A demo animation is built in.
| Option | What it does |
|---|---|
| Source | Demo Animation, Media File (JSON) or External URL. |
| Upload JSON File | Picks a .json file from the media library. Administrators can upload .json files. |
| JSON URL | Address of a JSON file on another host, which must allow cross-origin requests (CORS). |
| Link | Set to Custom URL to wrap the animation in a link. |
| URL | The address the animation links to. |
| Caption | Optional text shown under the animation. |
| Accessible Description | Text read by screen readers. Leave empty for decorative animations. |
| Option | What it does |
|---|---|
| Play When | The trigger: Page Loads, Visible in Viewport, On Hover, On Click or Scroll Controlled. |
| On Mouse Leave | What happens when the pointer leaves: Pause, Play in Reverse, Reset to Start or Keep Playing (hover trigger). |
| Hover Area | The element that starts the hover: the Animation, Parent Column / Container or Parent Section. |
| Scroll Effect Range | Follows the scroll While Crossing the Viewport or over the Whole Page Scroll (scroll trigger). |
| Loop | Repeats the animation (not used with the scroll trigger). |
| Number of Loops | How many times it repeats. 0 means forever. |
| Speed | Playback speed from 0.1 to 5, where 1 is normal. |
| Play in Reverse | Plays the animation from its end to its start. |
| Start Point (%) | Where playback begins, as a percentage of the file. |
| End Point (%) | Where playback ends, as a percentage of the file. |
| Renderer | SVG (sharpest) or Canvas (fastest for complex files). |
| Lazy Load | Downloads the JSON only when the animation nears the viewport. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
alignment, width, max width, height, rotate, Flip Horizontally, and opacity and CSS filters for normal and hover with a transition duration.
background, border, box shadow, border radius and padding around the player, with normal and hover states.
alignment, typography, color, text shadow and margin (shown when a caption is set).
Set Source to Media File (JSON) and use Upload JSON File. Administrators can upload .json files. You can also paste an external JSON URL, or use the built-in demo animation.
The host of the JSON file must allow cross-origin requests (CORS). If it does not, upload the file to your own media library instead.
Yes. Set Play When to Scroll Controlled, then choose While Crossing the Viewport or Whole Page Scroll in Scroll Effect Range.
SVG is the default and the sharpest. Canvas is the fastest choice for complex files.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide