---
title: "How to Play Lottie Animation on Page Scroll in WordPress?"
url: https://nexterwp.com/docs/play-lottie-animation-on-page-scroll-in-wordpress/
date: 2024-12-11
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Play-Lottie-Animation-on-Page-Scroll-in-WordPress_-1024x519.jpg
word_count: 667
---

# How to Play Lottie Animation on Page Scroll in WordPress?

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](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/).

## 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.

## Related Docs

- [Add a Lottie animation in WordPress](https://nexterwp.com/docs/how-to-add-lottie-animation-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/)