How to add Lottie animations

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

Add Lottie element to canvas
Copy animation URL
Add URL to source
Editing Lottie animations

Add Lottie element to canvas

Go to the Left panel, in the Elements tab and 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.



You cannot edit the colors of the animation from TeleportHQ. You can do that in Lottie before adding it to the project.

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

Updated on: 12/05/2023