Why not use the HTML tag?

It's deprecated, can't loop seamlessly, ignores scroll velocity, and has no easing control. A GSAP-driven track gives you a seamless wrap, velocity reactivity, pause-on-hover, and prefers-reduced-motion handling - none of which the legacy tag offers.

How do I make the loop seamless with no visible jump?

Render the content twice in one track, then animate the track by exactly one copy-width (`xPercent: -50` if the track holds two copies). When it resets to 0, the second copy is pixel-identical to where the first started, so the reset is invisible. Mismatched widths are the usual cause of a visible seam.

Should the marquee pause on hover?

For logo strips and image bands, yes - pausing on hover lets users focus on one item. For decorative keyword tickers, no - the constant motion is the point. The Annnimate component exposes a pause-on-hover toggle so you decide per use case.

Motion pattern

Marquee

A marquee is a continuously scrolling strip of content, text or logos or images, that loops seamlessly. Modern marquees react to scroll velocity, speeding up and reversing direction as the user scrolls, which turns a dated effect into a tactile one. The loop is driven by GSAP, not the deprecated HTML `<marquee>` tag.

Updated June 2, 2026

Components

Components that solve this

Infinite MarqueeA row of content that scrolls on its own, sideways or up and down, and you can grab it to scrub through and let go to keep it going.Velocity ClipContent clips and unclips depending on how fast you're scrolling, so quick scrolls cut more than slow ones.Infinite Draggable GridA row of items you can drag through sideways, with momentum, that loops forever so you never hit the end.

Tradeoffs

Tuning the pattern

Velocity coupling: A constant drift (Marquee's `speed` default 1, with `draggable` for the tactile nudge) is enough for a trusted-by logo band; the scroll-velocity multiplier earns its complexity only on editorial bands where speeding up and reversing on scroll is the point, and even then smooth the raw velocity (Velocity Clip damps with `smoothing` 0.1) or it jitters on every scroll tick.
Seam handling: Duplicate-and-translate (Marquee runs `tracks` 2 by default, `clone` auto adds only enough copies to fill the viewport) is the reliable choice; a modulo-wrap saves DOM nodes but recomputes positions every frame, so reach for it only when the track holds dozens of heavy image tiles and the extra clones actually hurt.
Content type: Logos and image tiles want a slow drift (`speed` near 0.5 to 1) plus `pause-on-hover` so users can settle on one item; rotating keyword text wants slightly faster, continuous motion with pause-on-hover off, since the constant movement is the signal and stopping it reads as broken.

When

When a marquee fits

Marquees fill horizontal space with motion and work best as a band between sections, not as primary content.

Logo strips ('trusted by') that should feel alive rather than static
Rotating taglines or feature keywords between sections
Image bands in editorial or portfolio layouts
Ticker-style announcements where continuous motion signals 'live'

Don't loop critical content

A marquee never stops, so anything a user needs to read fully (pricing, legal, a CTA) does not belong in one. Keep marquees decorative or supplementary.

Mechanics

How the loop works

A seamless marquee duplicates its content so a second copy is always entering as the first exits. A single timeline translates the track by exactly one content-width, then resets to 0 - because the duplicate is identical, the reset is invisible.

script.js

In production

Annnimate components that solve this pattern

The Marquee component handles the seamless loop, configurable speed, gap, and direction, with an optional scroll-velocity reactivity toggle
The Velocity Clip component applies the same scroll-velocity idea to a clip-path reveal rather than a horizontal loop
The Infinite Draggable Grid extends the loop concept to a two-axis draggable plane

FAQ

Common questions

Why not use the HTML <marquee> tag?: It's deprecated, can't loop seamlessly, ignores scroll velocity, and has no easing control. A GSAP-driven track gives you a seamless wrap, velocity reactivity, pause-on-hover, and prefers-reduced-motion handling - none of which the legacy tag offers.
How do I make the loop seamless with no visible jump?: Render the content twice in one track, then animate the track by exactly one copy-width (xPercent: -50 if the track holds two copies). When it resets to 0, the second copy is pixel-identical to where the first started, so the reset is invisible. Mismatched widths are the usual cause of a visible seam.
Should the marquee pause on hover?: For logo strips and image bands, yes - pausing on hover lets users focus on one item. For decorative keyword tickers, no - the constant motion is the point. The Annnimate component exposes a pause-on-hover toggle so you decide per use case.

PreviousMagnetic ButtonA magnetic button is a call-to-action that tracks the user's cursor with spring-like easing, then releases back to its resting position when the cursor leaves.NextMega MenuA mega menu is a large navigation panel that opens below a top-level item to reveal grouped links, often with columns, descriptions, and media.

Related patterns

Adjacent ideas in the patterns

Parallax ScrollA parallax scroll moves layers at different rates as the user scrolls, so foreground and background drift apart and the page gains a sense of depth.Scroll Image RevealA scroll image reveal uncovers an image as it enters the viewport, using a clip-path wipe, a mask, or a dissolve rather than a plain fade.