1. Home
  2. Docs
  3. Super Elements
  4. Super Elements Modules
  5. Lottie Animation

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 Heading 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