Lottie Animation Element

Last Update: March 14, 2024

The Lottie Animation Element offers you a way to add Lottie Animations to your content. A Lottie is “a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.” You can find animations at LottieFiles, and use the Element to add them anywhere in your content.

The Element is easy to use and has a range of styling options. Read below for more information, or watch the video for a visual overview..

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Lottie Animation Element

The Lottie Animation Element is easy to add anywhere in your content. Follow these simple steps below.

To start, find a Lottie Animation you want to display. Visit LottieFiles to see a large range of Lottie animations you can download. Then, download your chosen Lottie Animation as a JSON file.

Add the Lottie Animation Element to a Column in Avada Builder, and select the JSON file from your computer to upload. If you wish to make further customizations, there are lots of options, with which you can customize the loading and display of your Lottie Animation.

Read below for a detailed description of all element options.

Element Options

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
JSON UploadUpload a lottie JSON file. Visit LottieFiles to find animations.
Link URLAdd the URL the animation will link to, ex: http://example.com.
Link TargetControls how the link will open.
TriggerSelect the trigger for the animation to play.
Trigger OffsetControls when the animation should play.
Animation Relative ToSelect to what the start of the scroll animation should be relative to.
Element SelectorInsert the element CSS selector.
Cursor DirectionControl the direction of cursor movement to trigger the animation.
LoopControls whether the animation should loop.
Reverse AnimationSelect "yes" to play the animation in reverse.
Playback SpeedThe speed at which the animation should play.
Start PointSet the animation start point.
End PointSet the animation end point.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Max WidthSet the maximum width the animation should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full width.
AlignChoose how to align the animation.
MarginEnter values including any valid CSS unit, ex: 4%.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.
Filter Type
HueFilter hue.
SaturationFilter saturation.
BrightnessFilter brightness.
ContrastFilter contrast.
InvertFilter invert.
SepiaFilter sepia.
OpacityFilter opacity.
BlurFilter blur.

In this article