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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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 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:
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.
