Lottie

Responsive Addons for Elementor (RAE) Lottie is a widget that allows you to add Lottie animations by either uploading the file or by its source URL.

Content #

Lottie #

1. 1.Source – Choose the type of source for adding the animation. Available options are Media File and External URL.
2. 2.External URL – Add the source URL of the animation. This setting will be available only if the Source is chosen to be External URL. Media File – Upload the media file. This setting will be available only if the Source is chosen to be Media File.
3. 3.Alignment – Set the horizontal alignment of the animation.
4. 4.Caption – Choose how the caption will be added. Available options are None, Title, Caption, and Custom.
5. 5.Custom Caption – Add the custom caption for the animation. This setting will be available only if the Source is chosen to be Media File and the Caption is chosen to be Custom. This setting will also be available only if the Source is chosen to be External URL.
6. 6.Link – Choose whether to add a custom link or not.

Settings #

1. 1.Trigger – Select the action when the animation should be triggered. Available options are Viewport, On Click, On Hover, Scroll, and None.
2. 2.Viewport – Set the viewport range. This setting will only be available if Trigger is set to Viewport or Scroll.
3. 3.Loop – Whether to play the animation on loop or not.
4. 4.Times – Number of times the animation should loop. This setting will only be available if Loop is set to Yes.
5. 5.On Hover Out – How the animation should work on hovering out. Available options are Default, Animation, and Pause. This setting will only be available if Trigger is set to On Hover.
6. 6.Hover Area – Choose the hover area for the animation to work. This setting will only be available if Trigger is set to On Hover.
7. 7.Effects Relative To – Whether the animation should work relative to Viewport or Entire Page. This setting will only be available if Trigger is set to Scroll.
8. 8.Play Speed – Set the animation play speed.
9. 9.Start Point – Set the start point for the animation.
10. 10.End Point – Set the end point for the animation.
11. 11.Reverse – Whether the animation should reverse or not.
12. 12.Renderer – Set the animation renderer type. Either SVG or Canvas.
13. 13.Lazyload – Whether animation should lazyload or not.

Style #

Animation #

1. 1.Width – Set the width for the animation container.
2. 2.Max Width – Set the maximum width for the animation container.
3. 3.Border Type – Set the border for the animation container.
4. 4.Border Radius – Set the border radius for the animation container.
5. 5.Padding – Set the padding for the animation container.

Normal and Hover States

1. 1.Background Color – Set the background color for the animation container for each state.
2. 2.Opacity – Set the opacity for the animation container for each state.
3. 3.CSS Filters – Set the CSS Filter settings for the animation container for each state.