Content Controls
Content
This section allows you to configure the main features of your Lottie animation. You can specify the animation source, adjust its speed, set interaction triggers, determine its behavior on hover, and control its looping characteristics.
- Asset Url – Input the URL where your animation asset is hosted.
- Animation Speed – Adjust the speed at which the animation plays.
- Trigger – Choose the event that will trigger the animation (e.g., on hover, on click, when in the viewport, etc.).
- Hover Area – Define the area that will trigger the animation on hover. This control is only available when the trigger is set to “hover”.
- On Hover Out – Select the animation’s behavior when the mouse leaves the hover area. This control is only available when the trigger is set to “hover”.
- Reverse on finish – Decide if the animation should play in reverse after it finishes. This control is only available for certain triggers (“click”, “viewport”, “none”).
- Loop Animation – Toggle whether the animation should loop. This control is available for all triggers except “scroll”.
- Times to loop – Specify the number of times the animation should loop. This control is only available when loop animation is enabled.
- Frames – Determine the specific frames in the animation to play using a slider.
Design Controls
Wrapper
This section deals with the aesthetic aspects of the animation’s wrapper. Here, you can modify the background color and set the width of the animation container.
- Background Color – Choose a background color for the animation wrapper.
- Width – Set the width of the animation wrapper, affecting how much space the animation occupies on the page.
Borders
Here, you can fine-tune the borders of your animation, adjusting aspects like border radius, style, and shadow to match your site’s aesthetics.
- Radius – Define the roundness of the animation wrapper’s corners.
- Styling – Customize the style of the border surrounding the animation wrapper.
- Shadow – Apply a shadow effect to the animation, giving it depth and prominence on the page.
Spacing
This section controls the spacing around the animation, helping you ensure it fits seamlessly with the rest of your site’s content.
- Margin Top – Adjust the space above the animation wrapper.
- Margin Bottom – Adjust the space below the animation wrapper.
