Animations

How to add a Lottie animation

September 15, 2026
How to add a Lottie animation

To add a Lottie animation in TeleportHQ, add the Lottie element from the Elements panel's Media group to your page. Then, in the right panel, paste the animation's JSON link into the src field of the Attributes section. You can make it play automatically, loop, change speed or play on hover.

Before you start

  • You need a link to a Lottie animation file (a .json file). For example, from LottieFiles: open an animation and copy its Lottie Animation URL.
  • Lottie animations are available on every plan and in websites and web apps.

Steps

  1. On the canvas, select the container that should hold the animation. For example, the column next to your opening text.
  2. In the left sidebar, click Elements, then the Primitives tab.
  3. In the Media group, click Lottie, or drag it onto the canvas where you want it. It appears as a square with a sample animation, and it's selected.
The Media group of the TeleportHQ Elements panel with the Lottie card highlighted
  1. In the right panel, find the Attributes section.
  2. Click the src field and paste your animation link. For example, https://lottie.host/4db68bbd/checkmark.json.
  3. Press Enter. The new animation plays on the canvas.
The Attributes section of a TeleportHQ Lottie element, with the src field highlighted above autoplay, loop, speed, background and hover

Change how it plays

In the Attributes section of the TeleportHQ right panel:

  • autoplay: play as soon as the page loads. On by default.
  • loop: repeat the animation.
  • speed: 1 is normal speed, 2 is twice as fast, 0.5 is half speed.
  • background: a background color behind the animation. Transparent by default.
  • hover: play the animation when a visitor points at it.

You can size, position and space the Lottie element like any other element. To make it fade or slide in as visitors scroll to it, select it and use Add motion… in the Motion section. See How to animate any element (Add motion).

Check that it worked

Your animation shows on the canvas in place of the sample. Open Preview to check autoplay, loop and hover as a visitor would see them. See How to preview your site before publishing.

Troubleshooting

The sample animation still shows, or the element is empty The src field needs a direct link to a .json Lottie file. A link to a LottieFiles web page doesn't work. On LottieFiles, copy the Lottie Animation URL, which ends in .json.

I want to change the animation's colors You can't edit a Lottie animation's colors in TeleportHQ. Change them in LottieFiles or your animation tool, then use the new link.

Good to know

  • The src field takes a web address. You can host the .json file in the Assets Manager: upload it, choose Copy Asset Link to Clipboard in its menu and paste the link into src. The file must be valid JSON, and your plan's file size limit applies. See How to link to a file so visitors can download it.
  • There is no replace button for Lottie animations in the Assets Manager. To swap the animation, paste a new link into src.
  • Lottie animations keep playing for visitors who turn on "reduce motion" on their device. If that matters for your site, turn off loop. See What do visitors who turn on reduced motion see?
Share

Related Articles

Which animation options does TeleportHQ have?

TeleportHQ animates your site with Motion, in any project and on every plan; use Add motion in the right panel for one element, the Motion element for a group, Animate all pages for the whole site, the Transition section for smooth style changes, Scroll Scenes for scroll stories and Page transitions between pages, plus Lottie files and your own CSS.

How to animate any element (Add motion)

In TeleportHQ, select an element, click Add motion… in the Motion section of the right panel and pick an animation such as Slide up; the element moves into a Motion element right where it stands, plays when visitors scroll to it, and one undo takes it back out.

How to add elements to a page

In TeleportHQ, you add an element by clicking its card in the Elements panel to put it inside the selected element, by dragging the card onto the canvas, or by pressing its keyboard shortcut.

How to link to a file so visitors can download it

To let visitors open or download a file such as a PDF menu from your TeleportHQ site, upload it in the Assets Manager, right-click it and choose Copy Asset Link to Clipboard, then select a button, add a link and paste the address in the URL tab.