Widgets

Lottie Animation

Step-by-Step Tutorial on Using the Lottie Animation Widget of Zyre Addon

With Zyre Addon’s Lottie Animation Widget, you can add lightweight, high-quality animations to your website. These scalable JSON-based animations load fast, look sharp on any device, and bring your design to life with smooth motion and interactivity.

Learn How To Use Lottie Animation Widget:

Exploring the Features of Lottie Animation Widget

Step 1: Drag the widget

From the left panel, search or choose the Lottie Animation Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Lottie Animation:

  • Lottie Animation Style : Currently, only one style is available.
  • File Source : Choose how to load the Lottie file (upload or external link).
  • Animation JSON URL : Enter the JSON file URL for the animation.
  • Alignment : Set the position of the animation (left, center, right).
  • Link : Add a clickable link to the animation.
  • Autoplay : Toggle to play the animation automatically on load.
  • Loop : Enable or disable continuous looping of the animation.
  • Reverse : Play the animation in reverse direction.
  • Play Speed : Adjust the speed of the animation playback.
  • Trigger : Choose how the animation starts (on load, hover, scroll, etc.).
  • Rotate (Degrees) : Apply rotation to the animation in custom degrees.

Step 3: Style tab

Animation:

  • Width : Set a custom width for the animation.
  • Max Width : Define the maximum width the animation can take.
  • Opacity : Control the transparency level of the animation for both normal and hover states.
  • Transition Duration : Set smooth transition timing for hover effects.
  • CSS Filters : Apply visual effects like blur, brightness, contrast, grayscale, etc. with separate controls for normal and hover states.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Lottie Animation come to life on your webpage!

All done and ready to go!

Share: