Animations

How to choose a Motion animation and its speed

October 11, 2026
How to choose a Motion animation and its speed

In TeleportHQ, every animated element sits inside a Motion element, and its animation is set in Motion Settings in the right panel. Click the Animation field to pick a ready-made animation, such as Slide up or Pop in, then press the play button (▶) to watch it on the canvas. Set Speed to Snappy, Balanced or Smooth, or choose Custom to type an exact number of seconds.

Before you start

  • You need a Motion element. Add one to any element with Add motion, or add the Motion element and put content inside it.
  • Select the Motion element: click the animated element on the canvas, then press Esc. Each press selects the element around the current one; stop when the selection is named Motion. You can also click its Motion row in the layers tree. The right panel shows Motion Settings near the top, below Attributes, Classes and States.

Where the settings are

The top of TeleportHQ Motion Settings with four parts numbered: 1 the Animation field, 2 the play button, 3 Speed, 4 Easing

The parts of TeleportHQ Motion Settings you use to choose an animation:

  1. Animation: the animation that plays, for example Fade in. Click it to pick another one.
  2. The play button (▶): plays the animation on the canvas, exactly as set up, delay included.
  3. Speed: how long one play takes.
  4. Easing: how the movement feels, for example soft at the end or bouncy.

Pick an animation

  1. In Motion Settings, click the Animation field. A list opens with a Search animations… box.
  2. Point at an animation to watch a small preview of it beside the list.
  3. To narrow the list, type in the search box. For example, blur.
  4. Click the animation you want.
  5. Click the play button (▶) next to Animation to watch it on the canvas.

The TeleportHQ Motion animations, in the order the list shows them:

GroupAnimations
EntranceFade in (fades into view), Slide up and Slide down (rise or drop into place while fading in), Slide left (comes in from the right), Slide right (comes in from the left), Drop in (falls from above and lands with a bounce)
ScaleScale in (grows from slightly small), Zoom in (grows from much smaller), Pop in (springs in with a playful overshoot), Blur zoom (sharpens out of a blurred close-up), Zoom out (settles down from larger)
FlairRotate in (turns in a little), Swing in (swings up with an overshoot), Spin in (spins half a turn while growing), Develop (sharpens and gains color, like a photo developing), Glow in (arrives bright and settles into its colors), Tilt in (rises while straightening), Blur in (sharpens from a blur), Blur up (rises softly out of a blur)
AttentionSpin (turns non-stop, for loaders and badges), Wobble (rocks gently side to side), Pulse (gently swells and settles, to draw the eye to a button), Float (bobs up and down, for hero art and icons). These repeat forever.
AdvancedCustom (use keyframes): no ready-made animation. You set the start and end values yourself.

Some animations change other settings when you pick them, so they look right straight away:

  • Pop in, Swing in and Spin in switch Easing to Back, and Drop in switches it to Bounce.
  • Pulse, Float, Spin and Wobble set the animation to repeat forever. Picking an entrance after one of them sets it back to playing once.
  • Develop and Glow in start at the Smooth speed.

Picking an animation also clears any custom start and end values. One undo (Ctrl+Z, or Cmd+Z on a Mac) brings back the previous animation and its settings together.

Set the speed, delay and easing

  1. In Speed, choose:
    • Snappy: quick, for small touches such as a button.
    • Balanced: the default, right for most entrances.
    • Smooth: about a second, for big, deliberate moves.
    • Custom: an exact time. A Duration (s) field appears. Type the seconds, for example 0.8. To go back, pick one of the speed words.
  2. In Delay (s), type how many seconds to wait before it plays. For example 0.2. Three elements side by side with delays of 0, 0.15 and 0.3 play one after another.
  3. In Easing, choose how the movement feels: Ease, Ease in, Ease out (the default: a fast start and a soft landing), Ease in-out, Linear (a steady pace), or Spring, Back and Bounce for a movement that overshoots and settles.

For the slide animations, Drop in, Swing in, Tilt in and Blur up, a Distance (px) field sets how far the element travels.

Shape your own animation (Custom)

  1. Click the Animation field and pick Custom (use keyframes), at the bottom of the list.
  2. Under Keyframes, click Add animated property and choose what changes. For example, Opacity. A row appears with a From value and a To value.
  3. Change the values. For example, Opacity from 0 to 1 makes the element fade in, and Scale from 0.9 to 1 makes it grow a little as it arrives.
  4. Add more properties the same way. To remove one, click × at the end of its row.

You can animate Move X, Move Y, Scale, Rotate, Opacity, Blur, Grayscale, Saturation and Brightness. Keyframes win over a ready-made animation, and picking a ready-made animation clears them.

Check that it worked

Click the play button (▶) next to Animation: the animation plays on the TeleportHQ canvas with its delay, speed and easing. To see it exactly as visitors do, open Preview. See How to preview your site before publishing.

Troubleshooting

There's no play button, and no Speed field The Trigger is Scroll-linked (parallax): the scroll sets the pace, not a speed. Drag Editing position to see the movement on the canvas. See How to create advanced animations with the Motion element.

Speed shows Custom, and I didn't choose it The element's duration isn't one of the three speed words, for example because Animate all pages or the AI Assistant set it. The exact time shows in Duration (s). Keep it, or pick a speed word.

My keyframes disappeared Picking a ready-made animation clears them. Press Ctrl+Z (Cmd+Z on a Mac) to get them back.

Nothing moves when I press play If "reduce motion" is turned on in your own computer's settings, the canvas shows animations standing still. See What do visitors who turn on reduced motion see?

Share

Related Articles

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 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.

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 preview your site before publishing

In the TeleportHQ editor, click Preview in the toolbar at the bottom of the screen to open a working copy of your whole site in a new tab, where you can click links, try interactions and switch between desktop, tablet and mobile views.