ScrollTrigger Variable Font Marquee

ScrollTrigger Variable-Font Marquee — Weight Blooms as the Strips Drift

Goal

Build an editorial scroll page whose centerpiece is a stack of four horizontal image marquees. As you scroll, each strip of images drifts sideways (alternating rows drift opposite directions), and — interspersed among the thumbnails — big uppercase words are split into individual letters whose variable font-weight is scrubbed from 100 (hairline) to 900 (black) in a staggered wave. Everything is scroll-scrubbed through Lenis smooth scroll, so the text visibly "fattens up" and the strips slide as a direct function of scroll position.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) plus the GSAP plugin ScrollTrigger, the split-type package (imported as SplitType, this is NOT GSAP SplitText), and lenis (npm) for smooth scroll. A Vite-style dev server that resolves npm imports is all that's needed.

Layout / HTML

<div class="container">
  <section class="hero">
    <img src="..." alt="" />              <!-- full-bleed opening image -->
  </section>

  <section class="about">
    <p>Step into a surreal, immersive world where reality and fantasy
       intertwine — striking visuals meeting thought-provoking narratives.</p>
  </section>

  <section class="marquees">
    <div class="marquee-container" id="marquee-1">
      <div class="marquee">
        <div class="item"><img src="..." alt="" /></div>
        <div class="item with-text"><h1>Unique</h1></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
      </div>
    </div>
    <div class="marquee-container" id="marquee-2">
      <div class="marquee">
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item with-text"><h1>Release</h1></div>
        <div class="item"><img src="..." alt="" /></div>
      </div>
    </div>
    <div class="marquee-container" id="marquee-3">
      <div class="marquee">
        <div class="item"><img src="..." alt="" /></div>
        <div class="item with-text"><h1>2500</h1></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
      </div>
    </div>
    <div class="marquee-container" id="marquee-4">
      <div class="marquee">
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item"><img src="..." alt="" /></div>
        <div class="item with-text"><h1>Rarity</h1></div>
        <div class="item"><img src="..." alt="" /></div>
      </div>
    </div>
  </section>

  <section class="services">
    <p>In this meticulously designed dystopian world you'll find stories
       of resilience and intrigue.</p>
  </section>

  <section class="footer">
    <h1>The End</h1>
  </section>
</div>
<script type="module" src="./script.js"></script>

Key structural facts the JS/CSS depend on: each .marquee-container has a unique id (marquee-1…marquee-4), holds exactly one .marquee track, and that track holds 5 .item children — four .item with an <img> and one .item.with-text with an <h1> word. The word position rotates per row: row 1 word is 2nd (Unique), row 2 word is 4th (Release), row 3 word is 2nd (2500), row 4 word is 4th (Rarity).

Styling

• Variable font (required for the effect): load a display sans that exposes a full weight axis (100–900) as a single variable file. The original uses "Big Shoulders Display" — available as a variable webfont on Google Fonts, or self-hosted via @font-face with a .ttf/.woff2 weight-variable file. Apply it to html, body as the global font-family. The weight axis MUST be continuous, otherwise the fontWeight tween won't interpolate.
• Global reset: * { margin: 0; padding: 0; box-sizing: border-box; }.
• html, body: width: 100%; height: 100%; overflow-x: hidden; plus the variable font-family.
• img { width: 100%; height: 100%; object-fit: cover; }.
• Palette: warm olive-tan #87795f, near-black #13120e, pure white #fff.
• p: font-size: 42px; font-weight: 500; text-transform: uppercase;.
• Every section: width: 100%; height: 100vh;.
• section.about, section.services: padding: 4em; background: #87795f;.
• section.footer: flex-centered, background-color: #13120e; color: #87795f;. Its h1: font-size: 10vw; text-transform: uppercase;.
• section.marquees: height: 150vh; display: flex; flex-direction: column; justify-content: center; background-color: #fff; (the white plate the strips live on; taller than one viewport so the strips scroll through it).
• .marquee-container: position: relative; width: 125%; height: 250px; display: flex; gap: 1em; margin-bottom: 1em; overflow: hidden;. The 125% width intentionally overflows the viewport so the strip has slack to slide horizontally; overflow: hidden crops it.
• .marquee: width: 100%; height: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; gap: 1em;.
• #marquee-1 .marquee, #marquee-3 .marquee { left: -15%; } — rows 1 and 3 start pre-shifted 15% to the left (only these two).
• .item: flex: 1; display: flex; justify-content: center; align-items: center;.
• .item.with-text: flex: 1.5; (the word cell is wider than the image cells).
• .item h1: text-transform: uppercase; font-size: 140px;.
• Include the standard Lenis helper CSS: html.lenis, html.lenis body { height: auto; }, .lenis.lenis-smooth { scroll-behavior: auto !important; }, .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }, .lenis.lenis-stopped { overflow: hidden; }, .lenis.lenis-smooth iframe { pointer-events: none; }.
• Responsive @media (max-width: 900px): section.marquees → height: 100vh; .marquee-container → width: 250%; height: 150px; #marquee-2 .marquee, #marquee-4 .marquee { left: -35%; }; .item.with-text { flex: 1; }; .item h1 { font-size: 60px; }.

GSAP effect (be exhaustive)

Wrap everything in a DOMContentLoaded listener. gsap.registerPlugin(ScrollTrigger).

1. Split the words into characters

const splitText = new SplitType(".item h1", { types: "chars" }); — SplitType wraps every character of every word <h1> in a .char span (inline-block), which is what lets each letter carry its own animated fontWeight. Run this once, before creating the tweens.

2. Per-character font-weight bloom (the star effect)

Define a helper:

function animateChars(chars, reverse = false) {
  gsap.fromTo(
    chars,
    { fontWeight: 100 },
    {
      fontWeight: 900,
      duration: 1,
      ease: "none",
      stagger: {
        each: 0.35,
        from: reverse ? "start" : "end",
        ease: "linear",
      },
      scrollTrigger: {
        trigger: chars[0].closest(".marquee-container"),
        start: "50% bottom",
        end: "top top",
        scrub: true,
      },
    }
  );
}

Details that matter:

• Animated property: fontWeight 100 → 900 on each .char. Because the font's weight axis is continuous, letters visibly thicken from hairline to black.
• ease: "none" on the tween and ease: "linear" on the stagger — the weight ramp is perfectly linear; the scrub supplies the feel.
• stagger.each: 0.35 with from flipping per row creates a directional wave: when reverse is false the stagger starts from: "end" (last letter blooms first, wave travels right-to-left); when reverse is true it starts from: "start" (first letter first, left-to-right).
• ScrollTrigger: triggered by the word's own .marquee-container, start: "50% bottom" (begins when the row's mid-point hits the bottom of the viewport), end: "top top" (finishes when the row's top reaches the top), scrub: true — so the weight is a direct, reversible function of scroll.

3. Horizontal drift of each marquee strip + wiring the char bloom

Iterate every .marquee-container with its index:

document.querySelectorAll(".marquee-container").forEach((container, index) => {
  let start = "0%";
  let end   = "-15%";
  if (index % 2 === 0) {           // rows 1 & 3 (0-based even)
    start = "0%";
    end   = "10%";
  }

  const marquee = container.querySelector(".marquee");
  const words   = marquee.querySelectorAll(".item h1");

  gsap.fromTo(
    marquee,
    { x: start },
    {
      x: end,
      scrollTrigger: {
        trigger: container,
        start: "top bottom",
        end: "150% top",
        scrub: true,
      },
    }
  );

  words.forEach((word) => {
    const chars = Array.from(word.querySelectorAll(".char"));
    if (chars.length) {
      const reverse = index % 2 !== 0;   // odd rows reverse the bloom
      animateChars(chars, reverse);
    }
  });
});

Details that matter:

• x is animated as a percentage string ("0%", "10%", "-15%") — GSAP interprets this as a percentage of the strip's own width, not pixels. Even-index rows (1 & 3) drift x: "0%" → "10%" (rightward); odd-index rows (2 & 4) drift x: "0%" → "-15%" (leftward). Adjacent rows therefore slide in opposite directions.
• Combined with the CSS left: -15% on rows 1 & 3, this opposing motion plus the 125%-wide overflowing strips gives the classic contra-scrolling marquee look.
• ScrollTrigger for the drift: trigger: container, start: "top bottom" (begins as the row enters from the bottom), end: "150% top" (ends well after it passes), scrub: true. Note this drift trigger has a wider scroll window than the char-bloom trigger (which runs "50% bottom" → "top top"), so the letters finish blooming before the strip finishes drifting.
• The reverse flag passed to animateChars is tied to row parity, so the bloom wave direction alternates row to row in sync with the drift direction.

4. Lenis smooth scroll wired into GSAP's ticker

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Lenis drives the scroll; ScrollTrigger reads it via the scroll event, and Lenis's raf is stepped from GSAP's ticker (with lagSmoothing(0)). This is what makes the scrubbed weight-blooms and drifts feel buttery.

No timeline, no CustomEase, no Three.js, no pinning. Every animation is an independent scrubbed fromTo — the two families of tweens (per-strip x drift and per-character fontWeight bloom) run in parallel, each governed by its own ScrollTrigger.

Assets / images

17 images total, all object-fit: cover, no logos or brand marks:

• 1 hero image — a full-bleed, surreal/dystopian, dreamlike 3D-rendered scene filling the opening 100vh viewport (portrait-friendly, but it's cropped to cover).
• 16 marquee thumbnails — surreal dystopian 3D-rendered stills in the same visual family, distributed 4 per row across the 4 strips. In their 250px-tall cells they read as roughly square-to-portrait crops. They interleave with the four word cells (Unique, Release, 2500, Rarity) exactly in the positions listed in the Layout section.

Behavior notes

• Whole page hijacks native scroll via Lenis; all animation is scroll-scrubbed and fully reversible (scrolling up un-blooms the weights and reverses the drift).
• The font-weight bloom depends entirely on a weight-variable font — with a static font nothing will interpolate, so verify the variable file loads.
• Alternating drift directions come purely from index % 2 (rows 1 & 3 vs rows 2 & 4); the bloom-wave direction alternates the same way via the reverse flag.
• Responsive: on ≤900px the strips get wider (250%) and shorter (150px), the headline size drops to 60px, and rows 2 & 4 gain a left: -15%-equivalent pre-shift (-35%); the animation logic is unchanged.
• Desktop-first editorial showcase; no reduced-motion branch in the original.