Lottie

Before setting up the Lottie widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all the premium widgets, including the Lottie widget. You can explore both free and pro widgets by filtering the selection options.

Introduction

The Lottie Widget adds lightweight, customizable animations for a more interactive experience.

Key Use Cases for the Lottie Widget in Elementor:

• Enhance your website with lightweight, high-quality animations using the Lottie widget.
• Customize animation triggers, speed, and design to create an engaging and interactive user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to activate a Lottie widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Lottie Widget in the list.
• Toggle it on to enable the widget.

This will activate the Lottie widget for you to use!

How to Add Lottie Widget in Elementor

1. Open the page where you want to add the Lottie Widget.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Lottie Widget.“
4. Drag the Event Slider widget to your desired section.
5. The Event Slider widget will now be available for customization.

How to Configure the Lottie Widget 

• In the Elementor panel, search for the “Lottie Widget.”
• Drag and drop the widget into your desired section.
• Customize the animation settings using the available options in the Elementor panel.

Your Lottie Widget is now ready to use! Here’s the interface where you can configure the animation settings and personalize the widget for a smooth and engaging user experience.

Configuring Lottie Widget: A Step-by-Step Guide

Once the Lottie widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

The Content section of the Lottie Widget includes two key configuration areas: Settings and Additional Properties. These options allow you to define how the animation behaves and integrates into your design.

Settings

1. Source

• Purpose: Define where your Lottie animation is coming from.
  
• Options:
  
  • Media File – Upload a local .json file.
  • External URL – Paste a direct link to a Lottie animation hosted online.
    
• Effect: Determines how the animation is loaded and played. An incorrect or missing source will result in the animation not displaying.

2. Upload JSON File

• Purpose: This is where you upload the .json animation file exported from Adobe After Effects via Bodymovin.
• Effect: The uploaded JSON file is rendered as an animated SVG. This file must be optimized and correctly structured to ensure smooth performance

3. Trigger

• Purpose: Controls when the animation starts.
  
• Options:

1. None

• Behavior: The animation does not auto-play or respond to any user interaction.
• Use Case: Ideal when combined with manual controls or custom JavaScript triggers.

2. On Scroll

• Behavior: The animation plays as the user scrolls to the section containing the Lottie widget.
• Use Case: Perfect for adding visual impact as a user explores the page.

3. On Hover

• Behavior: The animation plays only when the user hovers over the widget.
• Use Case: Ideal for interactive icons, buttons, or call-to-action elements.

4. Mouse Cursor

• Behavior: The animation reacts to the movement of the user’s cursor within the widget area.
• Use Case: Great for adding an engaging and dynamic feel, especially in hero sections or product showcases.

5. On Click

• Behavior: The animation starts when the user clicks on the widget.
• Use Case: Useful for interactive elements like animated buttons or toggles.

6. Viewpoint

• Behavior: The animation plays when the widget enters the browser’s viewport (i.e., becomes visible on the screen).
• Use Case: Best for storytelling or sequential animations as users scroll through a page.
  
• Effect: Improves user engagement by syncing animation with user interaction.

4. Autoplay

• Purpose: Automatically starts the animation when the widget is loaded.
• Effect: Useful for background or attention-catching animations without requiring user interaction.

5. Controls

• Purpose: Enables playback controls (Play, Pause, Stop).
• Effect: Enhances user interaction and gives visitors the ability to manage the animation manually—especially useful in educational or demo content.

6. Loop

• Purpose: Allows the animation to repeat indefinitely.
• Effect: Best for icons, visual cues, or animated elements that should remain active and continuously draw attention.

7. Speed

• Purpose: Adjust the playback speed of the animation.
• Effect: You can slow down or speed up the animation (0.5 for slower, 2 for faster). This is ideal for synchronizing animation with other elements on the page or setting a specific visual rhythm.

Additional Properties

Renderer:

The Renderer option within the Additional Properties section defines how the animation will be rendered (displayed) on the screen. It directly affects the performance, compatibility, and visual appearance of the animation.

🔧 Available Renderer Options:

1. Default

• Function: Automatically selects the most appropriate renderer based on the animation file and browser capabilities.
• Behavior: Balances performance and quality.
• Use Case: Best when you’re unsure which renderer to choose or want the widget to decide the optimal option.

2. SVG (Scalable Vector Graphics)

• Function: Renders the animation using SVG format.
• Behavior:
  
  • High-quality visuals at all screen sizes (scales without loss of quality).
  • Supports CSS styling and accessibility.
    
• Use Case: Ideal for simple vector-based animations, icons, and UI elements where clarity is crucial.

3. Canvas

• Function: Renders the animation inside an HTML <canvas> element.
• Behavior:
  
  • Offers faster rendering, especially for complex animations.
  • Not scalable without quality loss.
    
• Use Case: Best for fast, complex motion graphics and game-like animations

Background Color

• Function: Sets the background color of the animation area.
• Use Case: Useful for blending the animation with the site design or making it stand out.

Intermission

• Function: Sets the delay (in seconds) between animation loops when looping is enabled.
• Use Case: Helps control the timing between repeats, improving the pacing of the animation in UX.

Style Settings

The Style section in the Lottie Widget allows users to control the dimensions of the animation to ensure it fits seamlessly within their design layout.

• Key Customization Options:

• Height: Define the vertical size of the animation.
• Width: Set the horizontal size to match your section or container.
•  How It Works:

• You can manually input pixel (px), percentage (%), or viewport (vh/vw) values.
• Adjusting these values helps scale the animation proportionally or responsively based on your layout needs.
•  Use Case:
• Perfect for making the animation responsive across devices, ensuring it looks clean and professional on both desktop and mobile views.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Lottie widget in Elementor to create dynamic and engaging animations on your website.

For any further assistance or inquiries, feel free to contact our support team!