--- title: "How to Add LottieFiles in the Elementor Image Cascading Widget?" url: https://theplusaddons.com/docs/add-lottiefiles-in-the-elementor-image-cascading-widget/ date: 2024-05-13 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "A Lottie animation is a small JSON file that plays as a crisp vector animation at any size, which makes it a natural companion to a still image cascade. The..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-LottieFiles-in-Elementor-Cascading-Image-Widget_-1024x536.jpg word_count: 715 --- # How to Add LottieFiles in the Elementor Image Cascading Widget? ## - The Plus Addons for Elementor includes the Image Cascading widget, which supports adding LottieFiles with text content. - Users must create a free account on LottieFiles.com to access and save Lottie animations for use. - The process involves selecting Lottie from the Layer Type dropdown and pasting the JSON link in the Lottie URL field within the Image Cascading widget. A Lottie animation is a small JSON file that plays as a crisp vector animation at any size, which makes it a natural companion to a still image cascade. The **Image Cascading** widget from The Plus Addons for Elementor accepts a Lottie file as a layer type, alongside images and text. *To check the complete feature overview documentation of The Plus Addons for Elementor Image Cascading widget, [click here](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/image-cascading/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — Image Cascading ships only in the Pro version of The Plus Addons for Elementor. The widget file is not in the free plugin at all, so it does not appear in the widget list without Pro.- **Widget to enable:** **Image Cascading**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on, then reload the Elementor editor.- **Where the settings are:** drop the **Image Cascading** widget on the page. The **Content** tab holds three sections — **Image Cascading** (the layers), **Image Animation** and **Styling**.- **How it is built:** each item in the **Add Multiple Cascading Sections** repeater is one layer. Layers are absolutely positioned inside the widget, so they can overlap.- **You need the JSON URL of the animation.** On [LottieFiles](https://lottiefiles.com/) open the animation, go to the **Handoff** tab, switch on **Enable asset CDN** and choose **Lottie JSON** as the asset link format. A file you host yourself works too, as long as the URL ends in `.json`. ## Add a Lottie Layer - Open the **Image Cascading** section. Open the **first** item under **Add Multiple Cascading Sections** — see the note below, the position matters.- Set **Layer Type** to **Lottie**.- Paste the JSON URL into the **Lottie URL** field.- Place the layer with **Left (Auto / %)**, **Top (Auto / %)** and **Width**, as with any other layer.- Update the page and check the animation on the published page. > ***Put the Lottie layer first.** A Lottie layer only plays if it is the **first** item in **Add Multiple Cascading Sections**. In any later position the player script is never loaded and nothing is drawn. We saw this on two otherwise identical test pages in 6.5.0.* ## Control the Animation The size and playback settings live in the **Lottie** section of the **Style** tab. They apply to the widget, so every Lottie layer in it uses the same values. | Setting | What it does | Default | | ------- | ------------ | ------- | | **Width** / **Height** | The box the animation is drawn in, in pixels. Set both; left empty the widget falls back to 100 px. | Empty (100 px) | | **Speed** | Playback speed multiplier. | 1 | | **Loop Animation** | Repeats the animation instead of playing it once. | On | | **Hover Animation** | Plays only while the pointer is over the layer instead of playing on its own. | Off | | **CSS Filters** | Blur, brightness, contrast, saturation and hue, for the normal and hover states. | None | ## The Result A Lottie layer placed beside a photo, 220 by 220 px, looping: ![A published image cascade with a looping Lottie animation drawn beside the photo layer](https://theplusaddons.com/wp-content/uploads/2026/09/imgcascading-result-lottie.webp) ## Limitations - A Lottie layer only plays if it is the **first** item in **Add Multiple Cascading Sections**. In any later position the player script is never loaded and nothing is drawn. We saw this on two otherwise identical test pages in 6.5.0.- The **Lottie** style settings are per widget, not per layer, so two Lottie layers in the same widget cannot have different sizes or speeds.- The URL must end in `.json`. Anything else makes the widget print *Opps!! Please Enter Only JSON File Extension.* in place of the layer.- The file is fetched from wherever you linked it, so a CDN that is slow or blocked means the animation never appears. ## Troubleshooting ### Nothing is drawn where the Lottie should be Check that the Lottie layer is the **first** item in **Add Multiple Cascading Sections**, and that **Width** and **Height** are set in the **Lottie** section of the **Style** tab. ### It says Opps!! Please Enter Only JSON File Extension The link is not a JSON file. Copy the **Lottie JSON** URL from the LottieFiles **Handoff** tab, not the page URL or a GIF export. ### The animation is a tiny square **Width** and **Height** are empty, so the widget is using its 100 px fallback. Set both in the **Lottie** section of the **Style** tab. ## Related Docs - [Cascading Image Widget: Settings Overview](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/)- [How to Add Text Content in Elementor Image Cascading Widget?](https://theplusaddons.com/docs/add-text-content-in-elementor-image-cascading-widget/)- [How to Create Image Cascading Effect in Elementor?](https://theplusaddons.com/docs/create-image-cascading-effect-in-elementor/)