What is an infinite marquee?

A row that loops so you never see it restart.

The two copies are different widths, or the reset is visible. Match the widths.

Should it reverse on hover?

Only if the hover also lets people read a name. A speed change with no extra information is fidgeting.

Is this good for SEO?

Search reads the text in the row. Do not hide a paragraph in a loop.

If items are links, a keyboard user must be able to stop and reach them. A still fallback is the honest version.

Infinite marquee

An infinite marquee loops a row so the end meets the start without a visible jump.

SlidersBuild difficulty: EasyxPercent

Also called Infinite logo slider, Looping marquee, Looping ticker.

Here it is working.

RevealScrambleParallaxMarqueeFlipCounterRevealScrambleParallaxMarqueeFlipCounter

The row never ends. Two copies, one seam you cannot see.

For designers

People do not read a marquee. They glance. If the words matter, put them in a line that stays still.

Use this when

You have a strip of logos, names, or short marks that can repeat.
The row is decoration under a heading, or proof that other people showed up.
The items are a similar size, so the loop does not lurch.

Reach for something else when

Someone has to pick one item. Use a slider they can drag, or a list.
The text is a sentence. Use Text reveal or still type.
You need a start and an end. Use Step-by-step timeline.
You are tempted to pause it on hover and put a paragraph inside. That is a carousel.

How to build it

Duplicate the row so two copies sit in a line. Move the track sideways. When one copy has left, reset without a visual cut. Keep speed steady. Pause if someone focuses an item inside it. If reduced motion is on, show a still row.

Official GSAP

gsap.to with xPercent and repeat: -1. Helper: horizontalLoop.

gsap.to('.track', {
  xPercent: -50, duration: 12, ease: 'none', repeat: -1,
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

What is an infinite marquee?: A row that loops so you never see it restart.
Why do logos jump?: The two copies are different widths, or the reset is visible. Match the widths.
Should it reverse on hover?: Only if the hover also lets people read a name. A speed change with no extra information is fidgeting.
Is this good for SEO?: Search reads the text in the row. Do not hide a paragraph in a loop.
Accessible?: If items are links, a keyboard user must be able to stop and reach them. A still fallback is the honest version.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Infinite parallax slider