Skip to main content
All CollectionsWidgetsMedia Widgets
Lottie Animation Widgets
Lottie Animation Widgets
Updated over a week ago

The Lottie Animation widget enables you to add vector quality animations to your site.

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them on mobile and the web.

Browse for animation through LottieFiles, or create your own animation in After Effects, exported with the Bodymovin plugin.

To add the widget:

  1. In the left panel, click Widgets.

  2. Click and drag the Lottie Animation widget into your site.

Content Editor

To access the content editor:

  1. Right-click the widget, and click Edit Content.

  2. Copy the Lottie Animation URL in the box provided.

  3. To locate the URL for the animation, open the animation in LottieFiles, and click <html>. Alternatively, you can paste the URL of any JSON file hosted outside of LottieFiles.

  4. Select Loop Animation to continuously play the animation or select Animate on click.

  5. (Optional) To add a link to the animation, click Link, and select the link type.

  6. If you use a free LottieFile animation, you must include the credential information of the animation creator. The animation creator information is located at the bottom of the animation pop up.

Design Editor

To access the design editor, right-click the widget, and click Edit Design.

To resize the widget, move the width and height sliders. To maintain the proportions between the width and height, select Keep proportion.

Did this answer your question?