Lottie

The Lottie widget allows you to seamlessly integrate captivating animations into your web pages. Lottie animations can be added to different website elements such as logos, icons, loading spinners, and attention-grabbing hero sections.

View Live Demo

What is Lottie?

Lottie is an open-source animation library by Airbnb. It renders animations from .json files created using Adobe After Effects or other animation tools.

Content Tab

Lottie

  • Source: Choose between "Media File" to upload a JSON file from your library or "External URL" to link to an external JSON file.
  • Upload JSON File: Click the media icon to upload a Lottie JSON file from your computer.
  • Alignment: Align the Lottie animation within its container (left, center, right).
  • Link: Set a hyperlink for the Lottie animation; you can link it to none or a custom URL.

Settings

  • Trigger: Choose when the animation should start playing (e.g., when it enters the viewport, on click, on hover, on scroll, or none).
  • Viewport: Adjust the viewport values to control when the animation should be triggered as the user scrolls.
  • Loop: Toggle whether the animation should loop continuously.
  • Play Speed (x): Adjust the speed at which the animation plays.
  • Start Point: Set the starting frame of the animation.
  • End Point: Set the ending frame of the animation.
  • Reverse: Enable this to make the animation play in reverse.
  • Renderer: Select the renderer type for the animation, such as "SVG" or "Canvas".
  • Lazy Load: Enable this option to load the animation only when it's near the viewport, which can help with performance.


Style Tab

  • Width: Set the width of the Lottie animation relative to its container.
  • Max Width: Set the maximum width of the Lottie animation.
  • Opacity: Adjust the opacity of the animation.
  • CSS Filters: Apply CSS filters to the animation for effects like blur, brightness, contrast, etc.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.