Lottie

The Lottie Block and Addons is a free block that allows you to add lightweight, high-quality JSON-based animations to your pages. You can control how the animation plays using different triggers, set its direction, loop it, and adjust its playback speed for an engaging and interactive design.

Adding the block

To add the block:

1. Click the “+” button to add a new block.
2. Search for “Lottie” and select it.
3. For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

Configuration

• Upload JSON
  Upload your Lottie animation JSON file here. This file contains the animation you want to display.
• Animation Trigger
  Choose how the animation should start playing:
  • Autoplay – Plays automatically when the page loads.
  • Hover – Plays when the user hovers over the animation.
  • Click – Plays when the user clicks on the animation.
• Direction
  Decide the direction in which the animation plays:
  • Normal – Plays forward.
  • Reverse – Plays backward.
• Loop
  Enable this option to make the animation play continuously in a loop.
• Animation Speed
  Set the speed of the animation playback. A lower value slows it down, while a higher value speeds it up.