---
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-04-14
author: "Aditya Sharma"
description: "Do you want to play the Lottie animation on page scroll in WordPress? Triggering Lottie animations on scroll adds interactivity to your website, making the animation come to life as..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Play-Lottie-Animation-on-Page-Scroll-in-WordPress_-1024x519.jpg
word_count: 398
---

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

## Key Takeaways

- Nexter Blocks includes the LottieFiles Animation block, enabling animations to play on scroll in WordPress.
- Users can set a custom animation duration and offset for the scroll animation using the Custom Height option.
- Selecting Document Height allows for a fixed scroll animation effect by adjusting the block position and z-index value.

Do you want to play the Lottie animation on page scroll in WordPress? Triggering Lottie animations on scroll adds interactivity to your website, making the animation come to life as users navigate the page, creating a more engaging and dynamic browsing experience.

With the LottieFiles Animation block from Nexter Blocks, you can easily play the Lottie animations as users scroll in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks LottieFiles Animation block,* *[click here](https://nexterwp.com/docs/how-to-add-lottie-animation-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-lottiefiles-animations/)

To do this, add the LottieFiles Animation block to the page and follow the steps - 

1. In the **Lottie Content** tab, select the appropriate JSON input type and add the Lottie animation.

2. Then select **Scroll Parallax** from the **Play On** dropdown under the **Main Settings** tab.

> *Note: Make sure to disable the Loop Animation toggle, so the animation doesn’t play in a loop.*

3. Then, from the **On Scroll Height** section, you have to select the height type for the scroll. Here you'll find two options - 

- **Custom Height** - With this option, you can set a custom animation duration and offset for the scroll animation.

- **Document Height** - This will start and end animation based on the entire document height.

Select the option as per your requirements, let’s select Custom Height here.

4. In the **Duration** field, you can set the animation duration in pixels, i.e. the animation will play for an equivalent number of pixels set here as you scroll.

5. Then in the **Offset** field, you can set an offset value, i.e. the distance from the top of the browser where the animation starts.

For instance, if you set 500 and 100 in the Duration and Offset fields respectively, that means the animation will start 100 pixels before the top of the browser and it will continue for 500 pixels as you scroll down. 

If you scroll up, it will reverse the animation.

Now, based on your settings, the animation will play back and forth as you scroll down and up.

If you’ve selected Document Height, you can make an even more interesting fixed scroll animation effect. 

For this, you have to set the LottieFiles Animation block position to fixed from the Advanced tab and adjust the necessary z-index value.

## Frequently Asked Questions

**Q: What should I do if my Lottie animation is not playing on scroll?**
A: If your Lottie animation isn't playing on scroll, ensure that you've selected 'Scroll Parallax' from the 'Play On' dropdown under the Main Settings tab. Additionally, check that the 'Loop Animation' toggle is disabled, as this can prevent the animation from functioning correctly. If these settings are correct, review your scroll height settings to confirm they align with your intended animation behavior.

**Q: What is the best way to set the duration and offset for my Lottie animation?**
A: For optimal results, set the animation duration and offset based on your content layout. If you want the animation to start at a specific point, adjust the Offset field to determine where it begins. The Duration field should reflect how long you want the animation to play as the user scrolls. For example, setting a duration of 500 pixels and an offset of 100 pixels means the animation starts 100 pixels from the top and plays for 500 pixels down the page.

**Q: Are there any limitations when using the LottieFiles Animation block?**
A: One limitation to be aware of is that the LottieFiles Animation block is part of Nexter Blocks, so you must have it installed and activated to use this feature. Additionally, the animation behavior is dependent on the scroll settings you configure, so improper settings may lead to unexpected results in animation playback.

**Q: How do I add a Lottie animation to my WordPress page?**
A: To add a Lottie animation to your WordPress page, use the LottieFiles Animation block from Nexter Blocks. In the Lottie Content tab, input the appropriate JSON for your animation. Then, configure the settings under the Main Settings tab, including selecting 'Scroll Parallax' and adjusting the scroll height options to suit your needs. This process enhances user engagement by making your animations interactive.