---
title: "How to Add a Click Delay on Lottie Animation in WordPress?"
url: https://nexterwp.com/docs/add-a-click-delay-on-lottie-animation-in-wordpress/
date: 2024-12-11
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a click delay on a Lottie animation in WordPress? Adding a delay before a click action allows the animation to fully play before redirecting or..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Click-Delay-on-Lottie-Animation-in-WordPress_-1024x519.jpg
word_count: 302
---

# How to Add a Click Delay on Lottie Animation in WordPress?

## Key Takeaways

- Nexter Blocks includes the LottieFiles Animation block, allowing users to add a click delay for enhanced user experience.
- Users can set the Click Delay (ms) in the LottieFiles Animation block to match the animation duration for proper redirection.
- The LottieFiles Animation block requires installation and activation of Nexter Blocks to function properly.

Do you want to add a click delay on a Lottie animation in WordPress? Adding a delay before a click action allows the animation to fully play before redirecting or performing another action, enhancing the overall user experience and making interactions more fluid and engaging.

With the LottieFiles Animation block from Nexter Blocks, you can easily add a delay on click so it redirects after the Lottie animation plays.

*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 **On Click** from the **Play On** dropdown under the **Main Settings** tab.

> *Note: You can select any option, but for the best effect, you should select On Click. Also, make sure to disable the Loop Animation toggle, so the animation doesn’t play in a loop.*

3. Then enable the **URL** toggle.

From the **Type** section, you can select a link type. 

> *Note: Both Normal and Dynamic work the same way.*

4. Based on your selected Type, you have to add your link in the given field. 

5. Then in the **Click Delay (ms)** section, you have to add the delay. You can set the delay as per your animation duration, so it redirects after the animation ends.

In the **Aria Label** field, you can add an Aria label to improve the accessibility.

Now based on your settings when you click on the Lottie animation the animation will play then it will redirect to your specified link.

## Frequently Asked Questions

**Q: What should I do if the Lottie animation doesn't play on click?**
A: If the Lottie animation isn't playing on click, ensure that you've selected 'On Click' from the 'Play On' dropdown under the Main Settings tab. Also, check that the Loop Animation toggle is disabled, as having it enabled may cause the animation to loop instead of playing once. This setup is crucial for ensuring the animation plays correctly before any redirect occurs.

**Q: Can I use the LottieFiles Animation block with other page builders?**
A: The LottieFiles Animation block is part of Nexter Blocks, which is designed primarily for Gutenberg. While it also supports Elementor and Bricks, the best experience and features are achieved using Gutenberg as the primary builder. This means that if you're using a different page builder, you might not have access to all functionalities.

**Q: What is the best delay time to set for the click delay?**
A: The best click delay time should match the duration of your Lottie animation to ensure a smooth user experience. If the animation is 2 seconds long, setting the click delay to around 2000 milliseconds will allow the animation to complete before any redirect occurs. This enhances engagement by ensuring users see the full animation.

**Q: What happens if I forget to add a link in the URL field?**
A: If you forget to add a link in the URL field, the click action on the Lottie animation will not redirect anywhere after the animation plays. This can lead to confusion for users expecting a redirect. Always ensure that you input a valid link based on the selected link type to maintain a seamless interaction.

**Q: What are the requirements to use the LottieFiles Animation block?**
A: To use the LottieFiles Animation block, you need to have Nexter Blocks installed and activated on your WordPress site. This block is specifically designed to enhance your website's interactivity with Lottie animations, so ensure you meet this requirement to access its full capabilities.