Lottie Animations
How to Configure & Style Lottie Animations #
In this documentation, we will show you how to customize the Elementor Lottie Animation widget presented by Sastra Addons.
How to Activate Lottie Animations in Elementor #
To activate this Sastra Addons element, find the ‘Lottie Animations’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. Drag and drop the element anywhere on the page.
After you have dragged and dropped the element into any empty section of your page, you should be able to see it on your site like this by default.
How to Configure the Content #
Under the ‘Content’ tab, you will be able to configure the settigns of ‘Lottie Animations’.
Settings #
Come to the settings section, Find the Select JSON Source (Load From URL, Self Hosted, and Custom JSON Code), Alignment, Caption, Custom Caption, and Link options.
Trigger (None, Viewport, Hover, Scroll), Times, Animation Speed, Size, Rotate and Renderer(SVG, Canvas) options.
Also, Find the Autoplay, Loop and Reverse switcher.
Click to See Live Demo #
How to Style Lottie Animations #
To style your Lottie Animations click on the ‘Style’ tab and play around with the settings there.
Animation #
Come to the Animation section, you will find two sub-sections; Normal, and Hover.
In Normal Mode, Find the Opacity, Transition Duration and CSS Filters options.
In Hover mode, you will get Opacity and CSS Filters options.
Final Outcome #
All done! You have successfully customized the Lottie Animations widget on your website.
If you require any help, feel free to contact our support for further assistance.
