The lottie module for divi allows designers to use exclusive animated Lottie files to attract visitors with fantastic visualization. DiviFlash made this module feature enriched and super handy to use. The module’s features are divided into three categories like any other Divi module.
+ Content Tab
+ Design Tab
+ Advanced Tab
Content Tab
The content tab of the Lottie module brings several exclusive and initial features. In addition, Lottie Source and Lottie Setting are counted as special features in the content tab. However, the content tab has many more to discover; let’s jump in.
Lottie Source
The Lottie Source feature brings two different ways to upload Lottie files. Firstly, you can use a source link to upload Lottie files. Also, you directly upload one from your computer.
Here is one of the best resources for Lottie files-
https://lottiefiles.com/featured
Lottie Settings
Under Lottie Settings, you get all the exclusive features required to enhance the Lottie file’s beauty.
Animation Trigger
The Animation Trigger has 4 types of triggering options that define specific actions when the Lottie will animate. If you don’t want to give any animation trigger, you can go for None.
Viewport: If you set the Viewport trigger option, the Lottie animation will start when it appears on the viewport. Also, you can give a particular Threshold value from 0 to 1. If the value is 0.5, the animation will run when the Lottie is 50% visible on the viewport.
On Click: You can trigger the Lottie animation over clicking.
On Hover: You can trigger the Lottie animation while hovering over the Lottie file.
On Scroll: You can trigger the Lottie animation while scrolling the page.
Loop
Activating the Loop effect allows you to animate the Lottie files continuously. That means you can create a non-stop Lottie animation effect.
Animation Speed
The animation Speed feature is dedicated to controlling the speed of Lottie’s animation. It is measured by milliseconds.
Revers Direction
You can reverse the Lottie animation direction under the Reverse Direction feature. For example, if the Lottie animation starts from the left, you can make it run from the right side.
Renderer
With the renderer feature, you can define the browser to render the Lottie file as SVG or Canvas.
Link
The Link feature helps designers to take the audience to another page simply by providing a link to the module.
Background
Background setting has multiple options, such as background color, gradient color, image, and video features. And on top of these features, there are a few settings to make each adjustment as desired.
Admin Label
Admin Label provides the opportunity to customize the module name as you desire. So, it doesn’t have to be the actual name of the module that generally shows on the wireframe view.
Design Tab
We keep the design tab straightforward for the Divi Lottie module. All the default features you get in the general Divi module are available for this one. So, the customization becomes handy here.
Advanced Tab
The advanced tab makes the Lottie module developer-friendly. It has multiple developer-friendly features like CSS ID, Classes, Custom CSS, Transition, Visibility, and more.
However, the Lottie module brings no changes for the advanced tab features compared to the default Divi module.
NOTE
Mobile: Any setting with a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
