Lottie Animation Element
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..
How To Use The Lottie Animation Element
The Lottie Animation Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Find a Lottie Animation you want to display. Visit LottieFiles to see a large range of Lottie animations you can download.
Step 2. Download your chosen Lottie Animation as a JSON file.
Step 3. Add the Lottie Animation Element to a Column in Avada Builder.
Step 4. Select the JSON file from your computer to upload.
Step 5. If you wish to make further customization, 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
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
JSON Upload – Upload a lottie JSON file. Visit LottieFiles to find animations.
Link URL – Add the URL the animation will link to, ex. https://example.com
Link Target – Choose whether the link will open in the same tab (-self) or in a new tab (_blank).
Trigger – Select the trigger for the Animation to play. Choose from None, Viewport, Hover, or Click.
Trigger Offset – Controls when the animation should play. Choose from Default, Top of Element hits bottom of viewport, Top of Element hits middle of viewport, or Bottom of Element enters viewport.
Loop – Controls whether the animation should loop or not. Default is Yes.
Reverse – Select yes to play the animation in reverse.
Playback Speed – The speed at which the animation should play.
Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class for the column.
CSS ID – Allows you to add an ID for the column.
Design Tab
Max Width – Set the maximum width the animation should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full width.
Align – Choose how to align the animation. Choose from Text Flow, Left, Right, and Center. This option is also part of the Responsive Option Sets.
Margin – Enter values including any valid CSS unit, ex: 4%.
Extras Tab
Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
Filter Type (both regular & hover state options)
Hue – This filter controls the hue (color) of the contents of the column.
Saturation – This filter controls the color saturation of the contents of the column.
Brightness – This filter controls the brightness of the contents of the column.
Contrast – This filter controls the contrast of the contents of the column.
Invert – This filter inverts the colors of the contents of the column.
Sepia – This filter adds a sepia filter on the contents of the column.
Opacity – This filter controls the opacity of the contents of the column.
Blur – This filter adds a blur filter to the contents of the column.
Global Options
There are no Global Options for the Lottie Animation Element.
