A Lottie animation is a small JSON file that plays as real vector artwork — sharp at any size and a fraction of the weight of a GIF or a video.
The Lottie Animations block loads one of those files and decides when it plays: on load, on hover, on click, when it scrolls into view, or frame by frame as the visitor scrolls.
Before You Start
- Edition: Pro — the Lottie Animations block needs Nexter Blocks Pro.
- Block to enable: Lottie Animations, switched on under Nexter > Blocks in your WordPress dashboard.
Video Tutorial
Steps
- Add the Lottie Animations block to your page.
- Choose how to supply the file under JSON Input — URL for a link to a
.jsonfile, or Code to paste the file’s contents.
- Pick when it plays under Play On: Autoplay, Click, Hover, Viewport or Mouse Scroll.
- Set Play Speed and looping. The speed starts at 0.5, which is half speed.
- Optionally switch on a heading, a description or a link, then publish and check the page.
The default play speed is 0.5, not 1. Measured on every test page: an animation added with default settings runs at half the speed its author designed. If it looks sluggish, set Play Speed to 1.
How It Behaves
This block plays a Lottie animation — a JSON file exported from After Effects or downloaded from a library such as LottieFiles. It does not create or edit the animation; it loads the file and controls when and how it plays.
- Two ways to supply the animation. URL points at a hosted
.jsonfile, which the visitor’s browser fetches; Code stores the JSON inside the page itself. Both were measured rendering the same animation. - The file must end in
.json. Measured on a published page with a.lottieURL: no animation loaded and the page showed the heading “Opps!! Please Enter Only JSON File Extension.” above the block. The newer dotLottie format is not accepted — download the plain JSON version instead. - Play On decides the trigger — all five were measured working. Autoplay and Viewport start on their own; Click and Hover hold the animation at its first frame until you act; Mouse Scroll ties the frame to the scroll position.
- Total Loops means total plays. Measured: entering 3 plays the animation three times and stops. Leaving it blank with Loop switched on plays it forever.
- Renderer can be SVG, Canvas or HTML. SVG and Canvas were both measured animating normally; SVG is the usual choice.
With no URL and no pasted code the block renders the text “JSON Parse Not Working” instead of an animation — measured, so an unconfigured block is visible rather than silently blank.
Limitations
- Start and end points only work when you paste the JSON in, not when you load it from a URL. Measured with the same animation and the same settings: pasted JSON stayed inside the chosen range, while the URL version played the whole animation — identical to setting no range at all. If you need a custom range, set JSON Input to Code and paste the file’s contents. This is reported to the development team.
- One misconfigured Lottie block stops every Lottie block on the same page. Measured: a block with no JSON, followed by a correctly configured block — the second one never animated at all. If several animations on a page stop working at once, look for one that is showing “JSON Parse Not Working” and fix or remove it. This is reported to the development team.
- The block plays animations, it does not make them. Create the JSON in After Effects with the Bodymovin plugin, or download one from an animation library.
- Only plain
.jsonfiles are accepted — measured, a.lottieURL is rejected with a visible message.
Troubleshooting
The page says “JSON Parse Not Working”
The block has neither a URL nor pasted code. Add one of the two. Measured: this message renders in place of the animation.
The page says “Opps!! Please Enter Only JSON File Extension.”
The URL does not end in .json. A .lottie file will not load — download the plain JSON version of the same animation.
The animation looks too slow
Play Speed starts at 0.5. Measured on a default block: it runs at half speed until you change it. Set it to 1 for the animation’s intended speed.
Several animations on one page stopped working
Look for a Lottie block on the same page showing “JSON Parse Not Working”. Measured: one misconfigured block prevents every other Lottie block on that page from animating. Fixing or removing it restores the rest.
My start and end points are ignored
Measured: the range is applied only when the JSON is pasted in as Code. Loading the same file from a URL plays the whole animation. See the start and end points guide for the detail.
