Animations

How to animate any element (Add motion)

October 11, 2026
How to animate any element (Add motion)

To animate one element in TeleportHQ, select it, find the Motion section in the right panel and click Add motion…. Pick an animation from the list, for example Slide up. The element moves into a Motion element right where it stands, and the animation plays when a visitor scrolls to it. One undo takes it back out.

Before you start

  • Add motion works in website and web app projects, on every plan. It doesn't turn a website into a web app.
  • You need a role that can edit components.
  • To animate many elements at once, animate a whole page in one click instead.

Steps

  1. On the canvas, click the element once to select it. For example, a "Fresh bread every morning" heading.
  2. In the right panel, on the Visual tab, scroll to the Motion section. It sits below the element's own settings (such as Typography for a text) and above Size.
  3. Click Add motion…. A list of animations opens, grouped under Entrance, Scale, Flair, Attention and Advanced, with a Search animations… box at the top.
The Motion section of the TeleportHQ right panel with the Add motion… button highlighted
  1. Point at an animation in the list to see a small preview of it beside the list.
  2. Click the animation you want. For example, Slide up.
The open Add motion… list in TeleportHQ, with the Search animations… box and the first Entrance animations: Fade in, Slide up, Slide down, Slide left and Slide right

TeleportHQ puts the element inside a new Motion element in the same spot, selects that Motion element and opens its Motion Settings in the right panel. The animation plays On scroll into view, which means when the visitor scrolls to the element.

Change the animation

The animation lives in the TeleportHQ Motion Settings of the Motion element around your element. There you can pick another animation, change its speed and delay, or choose what starts it, such as On load or On hover. See How to choose a Motion animation and its speed.

To come back to these settings later, click the animated element on the canvas and press Esc: the selection moves up to the Motion element around it.

Undo or remove the animation

  • Right after adding it: press Ctrl+Z (Cmd+Z on a Mac) once. The Motion element goes and your element is back exactly as it was.
  • Later: drag the element out of the Motion element, on the canvas or in the layers tree, then select the empty Motion element and delete it. See How to move and rearrange elements by dragging.

Check that it worked

On the TeleportHQ canvas, the animation plays once as soon as the element shows. To watch it again, click the play button (▶) next to Animation in Motion Settings. In the layers tree, your element now sits inside a row named Motion.

To see it the way a visitor does, open Preview and scroll down to the element. See How to preview your site before publishing.

Troubleshooting

I don't see the Motion section The TeleportHQ Motion section shows for one selected element that can be animated. Check these:

  • Several elements are selected. Select only one.
  • The element is already inside a Motion element. Press Esc to select that Motion element, and change its Motion Settings instead.
  • The element still has an animation from the old Animation section. It shows Animation (legacy) instead, with a Switch to Motion button. See What happened to the Animation section, and how do I switch to Motion?
  • The element is a component used on the page. Open the component and animate the element inside it. See How to edit a component and update every copy.
  • The element is itself a Motion, Scroll Scene or Scroll Video element. Those animate through their own settings.
  • Form fields such as text inputs and text areas can't be animated this way. Animate the form or the container around them.

"Your current role does not have permission to edit components" Your role can't add Motion elements. Ask a workspace owner or admin.

Nothing moves on the canvas If "reduce motion" is turned on in your own computer's settings, the TeleportHQ canvas shows animations standing still, the way visitors with that setting see them. See What do visitors who turn on reduced motion see?

Good to know

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 choose a Motion animation and its speed

In TeleportHQ, select a Motion element, click the Animation field in Motion Settings to pick one of the ready-made animations (or Custom to set your own From and To values), press the play button to watch it, then set Speed to Snappy, Balanced or Smooth, or Custom for an exact number of seconds.

How to create advanced animations with the Motion element

In TeleportHQ, click Motion in the Motion group of the Elements panel to add an animation container, put your content inside it, then set the animation, what starts it (on load, on scroll into view, scroll-linked parallax, on hover or on tap), its speed and a stagger in Motion Settings; it works in websites and web apps alike.

How to animate an element when it scrolls into view

In TeleportHQ, select the element, click Add motion… in the Motion section of the right panel and pick an entrance such as Slide up; it plays when the visitor scrolls to the element, because On scroll into view is the default trigger, and Animate once and Visible amount in Motion Settings fine-tune when.

What happened to the Animation section, and how do I switch to Motion?

In TeleportHQ, the old Animation section (effects such as fadeInUp and Animate on Reveal) is now called Animation (legacy) and only shows on elements that already use it; those animations keep working, new ones come from Motion, and Switch to Motion moves an old animation to the closest Motion animation with the same timing.

What do visitors who turn on reduced motion see?

TeleportHQ sites respect the "reduce motion" setting of a visitor's device automatically; Motion animations show the content in place without moving, rows that slide by themselves stand still and can be swiped, page transitions become instant, and each Scroll Scene and Scroll Video shows what you choose in its Reduced motion setting.