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.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
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.
