The Lottie Widget allows you to add Lottie animations to your website, providing a rich and dynamic visual experience. You can customize the animations in various ways to suit your design needs.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Lottie file section
- Source Type: Choose between “Media Library” or “URL” to select the source of your Lottie animation.
- JSON URL: Enter the URL of your Lottie JSON file if you chose “URL” as the source type.
- JSON File: Upload your Lottie JSON file from the media library if you chose “Media Library” as the source type.
Settings section
- Autoplay: Toggle to automatically play the animation when it loads.
- Loop: Toggle to make the animation loop continuously.
- Reverse: Toggle to play the animation in reverse.
- Speed: Set the playback speed of the animation.
- Trigger Type: Choose how the animation is triggered (None, Viewport, Hover, Scroll, or Click).
- Viewport Position: Define the start and end points of the viewport trigger (if applicable).
- Size: Adjust the size of the animation.
- Alignment: Align the animation to the left, center, or right.
- Rotate: Rotate the animation by a specified degree.
- Render Type: Choose between Canvas or SVG for rendering the animation.
- Link: Add a link to the animation, with options for URL, target, etc.
Style tab
Under the Style tab, you can customize the appearance of your Lottie animation. Adjust opacity, transition duration, and apply CSS filters. You can also define different styles for normal and hover states to enhance visual interaction.
Usage tips
- Use high-quality Lottie animations to ensure smooth playback and visual appeal.
- Set the appropriate trigger type to match the desired user interaction.
- Experiment with different speeds and playback options to find the best fit for your animation.
- Utilize the style options to ensure the animation blends seamlessly with your site’s design.
Conclusion
The Lottie Widget is a powerful tool for adding engaging animations to your website. With extensive customization options, you can tailor the animations to suit your needs and enhance the overall user experience.