Lottie Animations

The Lottie Animations widget is a great way to add some movement to your website with high-quality animations. You can add vector quality animations to your site; either select from a large library of animations or create your own in After Effects and export them.

Note: Using Lottie Animations on mobile may decrease your PageSpeed.

To add an animation, open the Widgets tab and search for the Lottie Animations widget.

Click on the hyperlinked “LottieFiles” to bring up the library of animations.

Select the desired animation.

Note: if you select a free animation, you must include the creator’s credentials. More info here.

Locate the URL by clicking “Use this animation in <html>.”

Copy the JSON URL.

Returning to the site editor, paste this URL in the content tab of the widget.

Note: If you have an animation hosted outside of LottieFiles, simply paste the URL of the JSON file.

You can either select to “Loop animation” or “Animate on click” depending on if you want this to continually play or not.

Click the design tab to adjust the size and spacing of the widget. Use “Keep proportion” to maintain the existing proportions.