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.
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.
- JSON Input set to Code, for the reason given below.
Video Tutorial
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.
