How to add Lottie animations

This is how you can add Lottie animations to your projects and edit them directly in TeleportHQ.

1. Add Lottie element to canvas
2. Copy animation URL
3. Add URL to source
4. Editing Lottie animations

Add Lottie element to canvas

• Go to the Left panel, in the Elements tab
• From the Media section take the Lottie element and drag it to the container where you want to have the animation.

Copy animation URL

• Go to https://lottiefiles.com/
• Select the animation you want to add to your project
• Copy the address from the Lottie Animation URL section to your clipboard.

Add URL to source

• Select the Lottie element you previously added to the canvas
• In the Right panel in the Attributes section, paste the URL from the clipboard into the src field.

Editing Lottie animations

To edit the animation:

• Go to the Right panel and
• From the Visual tab you can use all of the options.

In the Attributes section you can add Autoplay or Loop to the animation, change the speed at which it plays, add a background color or make the animation run on Hover.

Use the other sections in the Visual tab to edit the animation like any other element in TeleportHQ. For example you can change the size, position, margin, padding, etc.

To learn more about using animations in TeleportHQ check out this article.

Updated on: 28/03/2025