Scroll-linked animation is the effect where the artwork moves only as far as the visitor has scrolled — scroll down and it plays, scroll back up and it rewinds.
The Lottie Animations block does this with the Mouse Scroll play option, which maps the scroll position onto the animation’s frames instead of running it on a timer.
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.
Video Tutorial
Steps
- Select the Lottie Animations block on your page.
- Set Play On to Mouse Scroll.
- Set Duration — the scroll distance, in pixels, over which the whole animation should play.
- Set Offset if you want the animation to start before or after the block reaches the top of the screen.
- Publish and scroll the real page — the effect does not run in the editor.
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.
- The frame follows the scroll position. Measured on a published page with 4601px of scroll and Duration set to 800: the animation sat on frame 0 up to 2400px, reached frame 84 at 3000px and frame 120 — its last — at 3600px.
- It is scrubbing, not playing. The animation is paused throughout; each scroll event moves it to the matching frame. Scrolling back up moves it back.
- Duration is a scroll distance, not a time. A smaller number makes the animation finish within a shorter scroll; a larger number spreads it over more of the page.
- This works the same whether the JSON comes from a URL or is pasted in. Measured both ways on identical pages, with identical results.
- Play Speed and Total Loops have no effect here — the scroll position sets the frame.
Limitations
- Give the block room to scroll. If the animation sits near the bottom of a short page there is not enough scroll distance left to play it through.
- The effect runs on the published page only, not inside the block editor.
- 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.
- On touch devices the effect follows the scroll position in the same way, but momentum scrolling can make it jump rather than glide.
Troubleshooting
The animation never moves when I scroll
Check Play On is set to Mouse Scroll, and that there is enough page below the block to scroll through. Measured: the frame stays at 0 until the scroll position passes the block.
It finishes far too quickly
Duration is too small. It is the number of pixels of scrolling that the whole animation is spread across, so increase it to slow the effect down.
It starts too late
Increase Offset to begin the animation before the block reaches the top of the screen.
Other animations on the page stopped working
Measured: a single Lottie block showing “JSON Parse Not Working” prevents every other Lottie block on that page from animating. Fix or remove the broken one.
