Lottie Animation

Lottie Animation widget is a free widget give you the ability to easily add Lottie Animations to your Elementor pages with no need to add custom code.

Lottie Animation Sample #

In the picture below you can view Super Lottie Animation module sample

Content #

Lottie Animation Settings #

• Source – This dropdown is for determining the source of lottie animation media file.
  • Media File – Select this option if you want to upload the media file.
    • Upload JSON File – Use this option to locate the media file on your media library.
  • External Link – Select this option if you want to use an external link.
    • External URL – Use this option to define the external media link.
• Alignment – Here you can select the alignment of the Lottie Animation file (Left, Center, Right)
• Caption – Option to provide caption for the Lottie Animation Media
• Link – You can use this option for using redirection link on mouse click.
  • None
  • Custom URL
• Size – Increase or decrease the Lottie Animation size as per your needs. You can use this option to control the size on responsive devices.
• Rotate – Option to rotate the Lottie Animation media.
• Trigger – You could select from different type of trigger options.
  • Autoplay – This option will make the Lottie Animation file work from the very beginning of the page load.
  • Viewport – This option will make the Lottie Animation file work only when it enters the viewport.
  • On Click – This option will make the Lottie Animation file work only when the mouse cursor clicks on it.
  • On Hover – This option will make the Lottie Animation file work only when the mouse cursor hovers over it.
  • Scroll – This option will make the Lottie Animation file work only when the screen is on scroll.
• Loop – Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.
• Reverse – Reverse option is for playing the animation reverse way.
• Play Speed (x) – Used for defining play speed.
• Renderer – Renderer option can be used for mentioning render mode.
  • SVG – SVG render is set as default and recommended.
  • Canvas – Set render type to canvas if you’re having performance issues on the page.

Style #

• Lottie Style
  • Normal
    • Opacity
    • CSS Filters
  • Hover
    • Opacity
    • CSS Filters
    • Transition Duration
• Caption Style
  • Position
  • Alignment
  • Text Color
  • Typography
  • Spacing