---
title: "How to Add Lottie Animation to Process Steps in Elementor?"
url: https://theplusaddons.com/docs/add-lottie-animation-to-process-steps-in-elementor/
date: 2024-06-13
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Lottie-Animation-to-Process-Steps-in-Elementor_-3-1024x536.jpg
word_count: 781
---

# How to Add Lottie Animation to Process Steps in Elementor?

## 

- The Process Steps widget in The Plus Addons for Elementor places a Lottie animation inside any step circle, and the animation stays sharp at any size while weighing far less than a GIF.
- The Plus Addons for Elementor Pro is required for the Lottie player script, and without Pro the Lottie option leaves the step circle empty even though the option appears in the free plugin.
- The first repeater item must be set to Lottie, and the URL must end in .json, or the widget renders an empty circle or shows an error instead of playing the animation.
- Style > Lottie controls Loop Animation and Hover Animation for the widget, while per-step Lottie Width and Lottie Height override those settings and can be set separately for desktop, tablet, and mobile.

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](https://theplusaddons.com/docs/add-process-steps-in-elementor/).

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/process-steps/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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](https://wordpress.org/plugins/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](https://lottiefiles.com/) 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.

![Screenshot: Set Lottie Width and Lottie Height for this step. They are responsive, so you can give desktop, tablet and mobile their own size](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps-lottie-new.gif)

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.

![A Lottie animation playing in the first step circle on the front end.](https://theplusaddons.com/wp-content/uploads/2026/09/processsteps-result-lottie.webp)

## 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.

## Related Docs

- [How to Add Process Steps in Elementor? (Vertical & Horizontal)](https://theplusaddons.com/docs/add-process-steps-in-elementor/)- [How to Create Vertical Process Steps in Elementor?](https://theplusaddons.com/docs/create-vertical-process-steps-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a Lottie animation to a process step in Elementor?**
A: The key prerequisites are Elementor free, The Plus Addons for Elementor Pro, and a Lottie JSON URL. The widget can show the Lottie option in the free plugin, but the script that actually draws the animation ships only in Pro, so without Pro the step circle stays empty. The URL also has to end in .json, because the widget checks the file extension before it tries to render anything.

**Q: Why is my process step circle empty when I set the icon to Lottie?**
A: That usually comes down to one of three things: the Lottie is not on the first repeater item, The Plus Addons for Elementor Pro is not active, or the URL does not end in .json. The important gotcha is that the animation script loads only when the first Process/Steps item is set to Lottie. If you want the animation later in the list, reorder the repeater or use a second Process Steps widget.

**Q: Can I use any JSON file URL for a Lottie animation in Process Steps?**
A: The widget accepts any URL that ends in .json, including a file from your own Media Library. A common source is LottieFiles, where you can open an animation, save it to your workspace, switch on the asset link, and copy the link it gives you. The extension check matters because preview pages, images, and .lottie bundles will not render as the step animation.

**Q: Can I put a Lottie animation on step two or three instead of the first step?**
A: The first step is the only one that can carry a Lottie in this setup. The page says the script that draws the animation loads only when the first item in the Process/Steps repeater is set to Lottie. If you place it on step two or three, the circle renders empty with no error. For anything later in the list, reorder the repeater or split it into a second Process Steps widget.

**Q: How do Loop Animation and Hover Animation affect a Lottie in Process Steps?**
A: Loop Animation keeps the animation replaying continuously, while Hover Animation makes it play only while someone hovers over the step. Both live in Style > Lottie and apply at widget level, not per repeater item. That means they control behavior across the widget, while Lottie Width and Lottie Height inside a specific step can still override sizing for that one step.

**Q: What should I do if my Lottie plays once and stops?**
A: That behavior usually means Loop Animation has been turned off or Hover Animation has been turned on. In this widget, Hover Animation waits for user interaction instead of running continuously, so it can look like playback stopped even though it is behaving as configured. If you want constant motion in a process circle, keep Loop Animation on and leave Hover Animation off.