--- title: "How to Add Lottie Animation in WordPress?" url: https://nexterwp.com/docs/how-to-add-lottie-animation-in-wordpress/ date: 2024-12-11 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Lottie-Animation-in-WordPress_-1024x519.jpg word_count: 832 --- # How to Add Lottie Animation in WordPress? ## Key Takeaways - Lottie Animations block carga un archivo JSON y controla el disparo en Autoplay, Click, Hover, Viewport o Mouse Scroll, pero no crea ni edita la animación. - Nexter Blocks Pro requiere activar Lottie Animations en Nexter > Blocks dentro del panel de WordPress. - JSON Input acepta dos formas: URL para un archivo .json alojado o Code para pegar el contenido; los archivos .lottie no se aceptan y muestran “Opps!! Please Enter Only JSON File Extension.”. - Play Speed empieza en 0.5, así que una animación con ajustes predeterminados se ejecuta a media velocidad; Total Loops 3 la reproduce tres veces y Loop sin valor la deja en reproducción infinita. 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. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-lottiefiles-animations/) ## 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 https://www.youtube.com/watch?v=dqR_81YcAnA&pp=0gcJCQMKAYcqIYzv ## Steps - Add the **Lottie Animations** block to your page. ![Adding the Lottie Animations block](https://nexterwp.com/wp-content/uploads/2024/12/lottiefiles-animation-activate-new-1.png) - Choose how to supply the file under **JSON Input** — **URL** for a link to a `.json` file, or **Code** to paste the file's contents. - Pick when it plays under **Play On**: Autoplay, Click, Hover, Viewport or Mouse Scroll. ![Choosing when the animation plays](https://nexterwp.com/wp-content/uploads/2024/12/lottiefiles-animation-design-type-1024x192.png) - 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 heading and description options](https://nexterwp.com/wp-content/uploads/2024/12/lottiefiles-animation-layout-options-new.png) ![A Lottie animation running on the published page](https://nexterwp.com/wp-content/uploads/2024/12/lottiefiles-animation-style-new.png) > ***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 `.json` file, 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 `.lottie` URL: 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 `.json` files are accepted — measured, a `.lottie` URL 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](https://nexterwp.com/docs/set-custom-start-and-end-points-for-lottie-animation-in-wordpress/) for the detail. ## Related Docs - [Play a Lottie animation on page scroll](https://nexterwp.com/docs/play-lottie-animation-on-page-scroll-in-wordpress/)- [Add a click delay on a Lottie animation](https://nexterwp.com/docs/add-a-click-delay-on-lottie-animation-in-wordpress/)- [Set custom start and end points](https://nexterwp.com/docs/set-custom-start-and-end-points-for-lottie-animation-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding a Lottie animation in WordPress?** A: The block is part of Nexter Blocks Pro, so the Pro edition has to be active and the Lottie Animations block must be switched on under Nexter > Blocks in your WordPress dashboard. That matters because the block only loads a Lottie JSON file, it does not create one. The page also says the animation should come from After Effects with Bodymovin or from a library such as LottieFiles. **Q: Should I use a JSON URL or paste the JSON code for a Lottie animation?** A: Both work, but they behave differently. A URL fetches a hosted .json file, while Code stores the JSON inside the page itself. The important gotcha is custom start and end points only work with pasted JSON, not with a URL. If you need a custom range, Code is the safer choice because URL-based animations play the full file. **Q: Why is my Lottie animation showing 'JSON Parse Not Working'?** A: That message appears when the block has neither a JSON URL nor pasted code. In other words, the block is visible but unconfigured, so it shows text instead of staying blank. Adding either a valid .json URL or pasting the JSON content fixes that state and lets the animation load normally. **Q: Why won't my .lottie file load in WordPress?** A: This block accepts only plain .json files. A .lottie URL is rejected and triggers the message 'Opps!! Please Enter Only JSON File Extension.' The practical fix is to download or export the plain JSON version of the same animation, because dotLottie is not accepted here. **Q: Why does my Lottie animation play too slowly by default?** A: The default Play Speed starts at 0.5, which means half speed, not normal speed. That can make an animation feel sluggish even when everything else is configured correctly. Setting Play Speed to 1 restores the speed its author designed, which is usually what you want for a faithful playback. **Q: Why did several Lottie animations on one page stop working at once?** A: One misconfigured Lottie block can stop every Lottie block on that page from animating. The page measured this with one block missing JSON and another correctly configured block that never played. If everything breaks together, look for a block showing 'JSON Parse Not Working' and fix or remove it first.