top of page

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.

Creating a design library

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 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.

Theme manager in Editor X

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.

Saving the typography in Editor X Design Library


Intro to Velo


Intro to Velo

Video & decorative


Video & decorative

Click & hover interactions


Click & hover interactions

Was this lesson helpful?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

bottom of page