partners-marquee

Summary

An infinite horizontal strip of partner logos sitting between two hairline rules under the hero. The track is duplicated in markup so the loop reads continuous as Webflow IX2 translates it.

HTML structure (minimal)

<div class="hero-partners">
  <div class="hero-partners-moving">
    <img src="images/Clandestine.png" class="hero-client-logo" alt="">
    <img src="images/Boltshift.png" class="hero-client-logo" alt="">
    <img src="images/Biosynthesis.png" class="hero-client-logo" alt="">
    <img src="images/BuildingBlocks.png" class="hero-client-logo" alt="">
    <img src="images/AltShift.png" class="hero-client-logo" alt="">
    <!-- duplicated set so the wrap-around is invisible -->
    <img src="images/Clandestine.png" class="hero-client-logo" alt="">
    <img src="images/Boltshift.png" class="hero-client-logo" alt="">
    <img src="images/Biosynthesis.png" class="hero-client-logo" alt="">
  </div>
</div>

Key SCSS tokens

.hero-partners {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-top: 50px;
  padding: 15px 0;
  overflow: hidden;          // crops the moving track
}
.hero-partners-moving {
  white-space: nowrap;       // single-line track regardless of width
}
.hero-client-logo {
  margin-right: 100px;       // generous gap between marks
}

Animation logic

// Webflow IX2 drives the translateX on .hero-partners-moving via the
// data-w-id="darkyn23" timeline. To rebuild from scratch:
//   gsap.to('.hero-partners-moving', {
//     xPercent: -50,         // half of the doubled track
//     duration: 30,
//     ease: 'none',
//     repeat: -1,
//   });

Notable details

• The track is duplicated in markup, not cloned in JS — keeps the animation straightforward and avoids a flash before the clone is appended.
• Logos are kept as PNGs at their natural width with explicit width= attributes (179.5–238.5) instead of being normalized — preserves the brand proportions a designer cared about.
• Hairline borders top and bottom are a Swiss touch that frames the strip without a heavy section background.

Use when

• Agency or SaaS sites that want a "trusted by" strip between hero and content without resorting to a static logo grid.
• Anywhere you have 8+ partner marks and want to imply many more.

Caveats

• Animation depends on Webflow runtime (js/plugins.js); on a non-Webflow port you must replace the IX2 timeline with GSAP / CSS keyframes.
• The duplicate-set approach assumes the original images visibly tile to fill 1.5–2× the viewport; if you have fewer logos, duplicate the set 3–4× in markup.