Articles on: FAQ

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.

Drag Lottie elements to canvas

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.

Get Lottie animation URL

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.

Add Lottie animation URL to 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.

Editing Lottie Animations

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

Updated on: 17/01/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!