Infinite Marquee (GSAP)

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #050910;
  color: #f2f6ff;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
}

/* ── Row container ── */
.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

/* ── Track ── */
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  will-change: transform;
}

/* ── Words ── */
.marquee-word {
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.08);
}

.marquee-sep {
  font-size: 1.5rem;
  color: #1e293b;
}

/* ── Outline row ── */
.marquee-row--outline .marquee-word {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
}

/* ── Fast row ── */
.marquee-row--fast .marquee-word {
  font-size: clamp(1.2rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, 0.05);
}

.marquee-word--gradient {
  background: linear-gradient(90deg, #38bdf8, #818cf8, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.4;
}

(function () {
  "use strict";

  if (!window.gsap) return;

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduced) return;

  function setupMarquee(trackEl) {
    // Fill viewport with clones
    const origWidth = trackEl.scrollWidth;
    const vw = window.innerWidth;
    let clone = trackEl.cloneNode(true);
    trackEl.parentElement.appendChild(clone);
    // Keep cloning until we have at least 2× viewport width
    while (trackEl.parentElement.scrollWidth < vw * 2.5) {
      const c = trackEl.cloneNode(true);
      c.setAttribute("aria-hidden", "true");
      trackEl.parentElement.appendChild(c);
    }

    const speed = parseFloat(trackEl.dataset.speed) || 1;
    const reverse = trackEl.dataset.reverse === "true";
    const baseSpeed = speed * (reverse ? 1 : -1);

    let xPos = 0;
    let vel = baseSpeed;
    const singleW = origWidth;

    gsap.ticker.add(() => {
      xPos += vel;
      // Loop: when offset > 0 or < -singleW, reset
      if (vel < 0 && xPos <= -singleW) xPos = 0;
      if (vel > 0 && xPos >= 0) xPos = -singleW;
      trackEl.parentElement.style.transform = `translateX(${xPos}px)`;
    });

    // Ease speed on hover
    trackEl.parentElement.parentElement.addEventListener("mouseenter", () => {
      gsap.to({ vel }, { duration: 0.6, ease: "power2.out", onUpdate() {} });
      vel = baseSpeed * 0.2;
    });
    trackEl.parentElement.parentElement.addEventListener("mouseleave", () => {
      vel = baseSpeed;
    });
  }

  // Wrap each track in an overflow container
  document.querySelectorAll(".marquee-track").forEach((track) => {
    const row = track.parentElement;
    row.style.overflow = "hidden";
    // Use a wrapper div for the transform
    const wrapper = document.createElement("div");
    wrapper.style.display = "inline-flex";
    wrapper.style.willChange = "transform";
    row.innerHTML = "";
    row.appendChild(wrapper);
    wrapper.appendChild(track);
    setupMarquee(track);
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Infinite Marquee GSAP</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">

    <!-- Row 1 — words, forward -->
    <div class="marquee-row">
      <div class="marquee-track" id="track-1">
        <span class="marquee-word">Motion</span>
        <span class="marquee-sep">·</span>
        <span class="marquee-word">Design</span>
        <span class="marquee-sep">·</span>
        <span class="marquee-word">Interaction</span>
        <span class="marquee-sep">·</span>
        <span class="marquee-word">Animation</span>
        <span class="marquee-sep">·</span>
        <span class="marquee-word">Experience</span>
        <span class="marquee-sep">·</span>
        <span class="marquee-word">Craft</span>
        <span class="marquee-sep">·</span>
      </div>
    </div>

    <!-- Row 2 — outline words, reverse -->
    <div class="marquee-row marquee-row--outline">
      <div class="marquee-track" id="track-2" data-reverse="true">
        <span class="marquee-word">Stealthis</span>
        <span class="marquee-sep">✦</span>
        <span class="marquee-word">Steal This</span>
        <span class="marquee-sep">✦</span>
        <span class="marquee-word">Open Source</span>
        <span class="marquee-sep">✦</span>
        <span class="marquee-word">UI Library</span>
        <span class="marquee-sep">✦</span>
      </div>
    </div>

    <!-- Row 3 — fast, gradient text -->
    <div class="marquee-row marquee-row--fast">
      <div class="marquee-track" id="track-3" data-speed="3">
        <span class="marquee-word marquee-word--gradient">GSAP</span>
        <span class="marquee-sep">—</span>
        <span class="marquee-word marquee-word--gradient">ScrollTrigger</span>
        <span class="marquee-sep">—</span>
        <span class="marquee-word marquee-word--gradient">Three.js</span>
        <span class="marquee-sep">—</span>
        <span class="marquee-word marquee-word--gradient">Lenis</span>
        <span class="marquee-sep">—</span>
        <span class="marquee-word marquee-word--gradient">WebGL</span>
        <span class="marquee-sep">—</span>
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

A silky-smooth infinite ticker using GSAP’s gsap.ticker and x transform — no CSS translateX, no duplicate DOM nodes required. Items are cloned dynamically to fill the viewport.

How it works

Clone track items until the total width exceeds the viewport
On each ticker frame, increment an xPos value by speed
When xPos reaches -originalWidth, reset to 0 — seamless loop

gsap.ticker.add(() => {
  xPos -= speed;
  if (xPos <= -origW) xPos = 0;
  track.style.transform = `translateX(${xPos}px)`;
});

vs CSS marquee (`lg-infinite-marquee`)

	CSS marquee	GSAP marquee
Speed control	CSS var	JS variable
Reverse on hover	CSS	GSAP `gsap.to(speed)`
Velocity easing	❌	✅ (ease in/out of speed)
DOM cloning	Manual duplicate	Auto-fill viewport

Code

Infinite Marquee (GSAP)

How it works

vs CSS marquee (lg-infinite-marquee)

vs CSS marquee (`lg-infinite-marquee`)