Lottie animations

Lottie animations are vector-based files you can use to add high-quality animations without weighing down your site. By importing Lottie animations you can create unique, engaging pages that look great on any screen size.

Adding a Lottie animation

Find the Lottie animation element in the Add panel under Embed & Social, and drag it onto the canvas.

Change the animation

The Lottie element loads a default animation. You can click Change Animation from the floating menu to replace it with the one you want.

To add a different animation, first copy the URL for the animation you want from lottiefiles.com. You’ll need to have a LottieFiles account to do this (which you can create for free).

Paste the new link in the Lottie Settings panel. The new animation appears instantly.

Play animation in a loop

From the settings panel you can toggle on Plays in a loop, or switch it off if you want to play the animation once.

Customizing the typography in Editor X Design Library

Add more customizations with code

You can turn on Dev Mode and add code to adjust Lottie animation settings such as speed, or to get them to play, pause and stop based on different conditions. Find out more here.