--- title: "How to Set Custom Start and End Points for Lottie Animation in WordPress? " url: https://nexterwp.com/docs/set-custom-start-and-end-points-for-lottie-animation-in-wordpress/ date: 2024-12-11 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "Downloaded animations often contain more than you need — a long intro, or a flourish at the end that does not suit the page. Start Point and End Point let..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Set-Custom-Start-and-End-Points-for-Lottie-Animation-in-WordPress_-1024x519.jpg word_count: 795 --- # How to Set Custom Start and End Points for Lottie Animation in WordPress?  ## Key Takeaways - Nexter Blocks Pro habilita el bloque Lottie Animations, y la opción se activa en Nexter > Blocks dentro del panel de WordPress. - Puntos de inicio y fin funcionan solo cuando JSON Input está en Code y el JSON se pega en el campo; si la animación se carga desde una URL, el rango se ignora. - Lottie Animations usa números de fotograma, no segundos ni porcentajes: en una animación de 120 fotogramas, Start 20 y End 40 reproducen solo ese tramo. - El rango se aplica a Autoplay, Click, Hover y Viewport, pero con Mouse Scroll la posición del desplazamiento fija el fotograma. Downloaded animations often contain more than you need — a long intro, or a flourish at the end that does not suit the page. **Start Point** and **End Point** let you play only the stretch of frames you want, without re-exporting the file. *For every External Form Styler setting in one place, see the [main Lottie Animations guide](https://nexterwp.com/docs/how-to-add-lottie-animation-in-wordpress/).* [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.- An animation already loading in the block — see the [main Lottie Animations guide](https://nexterwp.com/docs/how-to-add-lottie-animation-in-wordpress/).- **JSON Input set to Code**, for the reason given below. ## Video Tutorial ![A Lottie animation playing within its custom start and end frame range](https://nexterwp.com/wp-content/uploads/2026/09/lottie-start-end-fe.webp) ## Steps - Set **JSON Input** to **Code** and paste the animation's JSON into the field. The range is ignored if the file is loaded from a URL. - Switch **Start Point** on and enter the frame number to begin at. - Switch **End Point** on and enter the frame number to stop at. - Publish the page and watch the animation — it should now loop only within that range. - Adjust the numbers until the section is the one you want. > ***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.* ## 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. - **The values are frame numbers, not seconds or percentages.** A 120-frame animation accepts anything from 0 to 120; entering 20 and 40 plays the short stretch between those frames.- **Measured working with pasted JSON.** With Start 20 and End 40 the animation reported a first frame of 20 and a length of 20 frames, and never left that window over five seconds of playback.- **Measured ignored with a URL.** The same settings on the same animation loaded from a URL reported a first frame of 0 and a length of 120 — the whole animation, identical to a block with no range set.- **Switching a toggle on but leaving its box empty falls back to a default** of frame 1 for the start and frame 100 for the end, rather than doing nothing.- The range applies to Autoplay, Click, Hover and Viewport. Under Mouse Scroll the scroll position sets the frame instead. ## 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.- **There is no frame preview.** Finding the right numbers means trying a value and looking at the published page, or opening the JSON in an animation tool.- The range is a single continuous stretch — you cannot play two separate sections.- **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. ## Troubleshooting ### The whole animation plays and my range is ignored **JSON Input** is almost certainly set to URL. Measured: the range is applied only when the JSON is pasted in as **Code**. Paste the file's contents into the Code field instead. ### Nothing plays at all The start frame may be later than the end frame, or beyond the end of the animation. Check the animation's frame count and keep both values inside it. ### The animation starts partway through and jumps That is the range working. Choose a start frame where the artwork is at rest, so the loop does not jump when it repeats. ### I set a start point but not an end point The animation runs from your start frame to its own last frame. Switch **End Point** on as well if you want it to stop earlier. ## Related Docs - [Add a Lottie animation in WordPress](https://nexterwp.com/docs/how-to-add-lottie-animation-in-wordpress/)- [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/)