Lottie widgets are small animated elements which are rendered from .json files. Simply upload or reference an external .json file and adjust as desired.
Content
Lottie
Source: Select the source of the Lottie file, either Media File or External URLUpload JSON file: If Media File is chosen as the source, click here to upload the .json file from your computer.External URL: if External URL is chosen as the source, enter the URL hereAlignment: Align the widget to the left, right, or centerCaption: Select the caption to be used, which was assigned to the file in the Media Library, choosing either None, Title, Caption, or Custom. If Custom is selected, you can enter your own caption here.Link: Select Custom URL if you wish to enter a link for the element or select None for no link.
Settings
Trigger: Choose what will trigger the animation to begin, selecting from Viewport, On Click, On Hover, Scroll, or None. Viewport: This option is only available if either Viewport or Scroll is selected as the trigger. Select the position within the viewport at which the element will appear and when it will disappear.Effects Relative To Scroll: This option is only available if Scroll is selected as the trigger. Select whether the scroll position is relative to either Viewport or Entire Page.Loop: Choose No or Yes to continuously loop the animationNumber of Times: This option is only available if Yes is selected for Loop. Enter the number of times you wish to have the animation loop before stopping.Play Speed (x): Increase or decrease the speed at which the animation playsReverse Animation: Select Yes to reverse the animationStart Point: Select at which point the animation will beginEnd Point: Select at which point the animation will endRenderer: Select either SVG or Canvas to render the graphics. Lazy Load: Select Yes to lazy load this element or No to load it immediately
Style
Lottie
Width: Set the width of the elementMax Width: Set the maximum width of the elementOpacity: Set the Opacity for Normal and Hover statesCSS Filters: Set CSS Filters: Blur, Brightness, Contrast and Saturation for Normal and Hover statesTransition Duration: Set the amount of time before hover transition takes effect, in milliseconds
Security Note: Please be careful about uploading Lottie JSON files from an unknown source. JSON files may potentially include malicious content. Elementor does initiate actions to sanitize the files, but there are some risks involved nonetheless. Make sure you only upload trusted files and do not allow the option to upload unfiltered files unless you understand the risks involved.