Animations

How to make a row of logos scroll by itself

October 11, 2026
How to make a row of logos scroll by itself

In TeleportHQ, the AI Assistant turns a row of logos, quotes or badges into a row that slides sideways by itself, in an endless loop. Select the row, open the AI Assistant and ask, for example, "Make this row of logos slide to the left by itself, in a loop." The loop plays on the canvas, in Preview and on your published site, and stands still for visitors who ask for less motion.

Before you start

  • The AI Assistant uses AI tokens. See How to edit your website by chatting with the AI Assistant.
  • The row is the container whose items should travel: the element that holds all the logos side by side, not the section around it and not one logo.
  • Logos with their own width work best. If the row decides how wide each item is (for example, equal columns), the assistant gives each item a fixed width so the loop works.

Steps

  1. On the canvas, click one logo once to select it.
  2. Press Esc. The selection moves up to the row that holds all the logos. Check its name label above the canvas selection.
  3. Above the top right of the canvas, click AI Assistant. The selected row shows as a chip above the message box.
  4. In the message box, type your request. For example, Make this row of logos slide to the left by itself, in a loop.
  5. Press Enter. When the assistant is done, the change shows as a ticked line in the chat, and the row starts sliding on the canvas.
The TeleportHQ AI Assistant message box with the selected row shown as a chip above it

You can say more in the same request: the direction ("to the right"), the speed ("one full pass every 20 seconds"), or more space between the logos.

What the assistant builds

The TeleportHQ AI Assistant builds the whole loop in one step:

  • The row moves into a Motion element that travels at a steady pace and repeats forever.
  • A hidden copy of the row follows it, so the loop closes without a jump.
  • A container around the two hides whatever is outside its edges. You can style it like any container.

In the layers tree you see the container, the Motion element, your row and its copy. Links on the logos work in the copy too; workflows attached to the logos don't.

Change the speed or direction

  • Ask the assistant again, with the row selected. For example, Make this row slower: one pass every 30 seconds, or Make it slide to the right.
  • Or change the speed yourself: select the Motion element around the row and, in Motion Settings, change Duration (s). A longer time is slower.

The hidden copy doesn't update by itself. After you change the logos, select the row and ask the AI Assistant again, for example Refresh the sliding row. Otherwise the copy still shows the old logos.

Stop the row from sliding

Select the row and ask the TeleportHQ AI Assistant, for example Stop this row from sliding. The copy and the two wrappers go, and the row sits where it was, laid out by its own classes again; inline layout styles the row had before the loop aren't put back. If you moved other elements into the wrappers meanwhile, the assistant refuses and asks you to move them out first. Right after the assistant adds the loop, you can also undo the change. See How to undo changes made by the AI Assistant.

Check that it worked

The row slides on the TeleportHQ canvas as soon as the assistant is done. Open Preview to see it as visitors do. See How to preview your site before publishing.

Troubleshooting

There's a jump, or an empty stretch, in the loop The copy is out of date, usually after you changed the logos. Select the row and ask the assistant to refresh it.

The logos are squeezed or overlap The row used to decide each logo's width. Ask the assistant to give each logo a fixed width.

The row stands still on my computer If "reduce motion" is turned on in your own computer's settings, the row stands still and you can swipe it, as visitors with that setting do. See What do visitors who turn on reduced motion see?

Good to know

  • Visitors who ask for less motion see the row standing still, and can swipe it sideways to reach every logo.
  • Without the AI Assistant: a Slider element with the Logo marquee layout shows many small slides that move on by themselves every few seconds, with no arrows or bullets. It moves in steps rather than in one smooth glide. See How to create an image slider (carousel).
Share

Related Articles

How to edit your website by chatting with the AI Assistant

In the TeleportHQ editor, click AI Assistant above the canvas, select the element you want to change, type what you want in plain words and press Enter, and the assistant applies the change to your page.

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 create an image slider (carousel)

In TeleportHQ, you add a carousel with the Slider element, pick a ready layout such as Card carousel or Logo marquee in Slider Settings, then add slides, set autoplay, dots, arrows and slides per view, and style the arrows and bullets.

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.

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.