A Lottie is a small vector animation loaded from a JSON file. Dropped into a process step circle it gives the step a moving icon that stays sharp at any size and weighs far less than a GIF.
The Process Steps widget can put one in any step circle. For everything else the widget does, see the full Process Steps settings overview.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro for this feature. The Lottie option appears in the free plugin, but the script that draws a Lottie ships only in The Plus Addons for Elementor Pro. Without Pro the step circle stays empty.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Process Steps and turn its toggle on.
- Prerequisite: the URL of a Lottie JSON file. The widget checks the file extension, so the URL has to end in .json.
- Read this first: the animation only plays when the first step in the repeater is the one set to Lottie. See Limitations.
Get a Lottie JSON URL
If you do not already have one, LottieFiles is the usual source. Open an animation, save it to your workspace, switch on the asset link and copy the link it gives you. Any URL ending in .json will do, including one you upload to your own Media Library.
Steps
- Add the Process/Steps widget and set up your steps as usual in the Content section.
- Open the first repeater item.
- Set Select Icon to Lottie.
- Paste the JSON link into Lottie URL.
- Set Lottie Width and Lottie Height for this step. They are responsive, so you can give desktop, tablet and mobile their own sizes.
The Style tab has a Lottie section with Width, Height, Speed, Loop Animation (on by default) and Hover Animation (off by default). Those apply to the widget; the Lottie Width and Lottie Height inside the repeater item override them for that step.
What you get on the page
The step circle holds a live, looping animation. On the tested page it was set to 80 by 80 pixels and was measured playing, not frozen: the animation’s frame counter moved from frame 23 to frame 97 over about a second.
Settings used here
| Setting | What it does | Default |
|---|---|---|
| Select Icon | Set to Lottie to swap the icon for an animation | Icon |
| Lottie URL | The .json file to play | empty |
| Lottie Width / Lottie Height | Size of the animation in this step, per device | 40 px |
| Loop Animation (Style tab) | Replays the animation continuously | On |
| Hover Animation (Style tab) | Plays only while the visitor hovers the step | Off |
Limitations
- Only the first step can carry a Lottie. The script that draws the animation is loaded only when the first item in the Process/Steps repeater is set to Lottie. Put the Lottie on step two or three and the circle renders empty, with no error. If you need the animation further down the list, reorder the repeater so the Lottie step is first, or use a second Process Steps widget.
- This feature needs Pro. The option is visible in the free plugin, but the player script is part of Pro, so on Free the circle stays blank.
- The URL must end in .json. Anything else and the widget prints an error in place of the animation instead of playing it.
- Loop Animation and Hover Animation are widget-wide, not per step – they live in the Style tab, not in the repeater item.
Troubleshooting
The step circle is empty
Three things cause this, in order of likelihood: the Lottie is not on the first step; The Plus Addons for Elementor Pro is not active; or the URL does not end in .json.
An error message appears where the animation should be
The Lottie URL does not point at a .json file. A link to a preview page, an image or a .lottie bundle will not work.
The animation plays once and stops
Loop Animation in Style > Lottie has been turned off, or Hover Animation has been turned on, which makes it wait for a hover.
Not verified
So you know exactly what has and has not been checked:
- Speed, Loop Animation and Hover Animation were not varied – only the shipped defaults were rendered.
- The exact wording of the error shown for a non-JSON URL was read in the plugin source but not captured on screen, so it is not quoted here.
- The LottieFiles website steps above were not re-checked against lottiefiles.com, and that site changes its interface from time to time.
- Nothing was measured at tablet or mobile widths.
