clients-marquee

Summary

Two stacked horizontal logo rails. The first row scrolls left-to-right, the second right-to-left, with each row containing the same logos repeated 3× to allow seamless looping. Pure CSS — no JS marquee.

HTML structure (minimal)

<section class="clients-section">
  <div class="outer-container">
    <ul class="clients-list mb_30">
      <li><a href="#"><img src="clients-1.png"></a></li>
      <li><a href="#"><img src="clients-2.png"></a></li>
      <!-- repeat 3x for seamless loop -->
    </ul>
    <ul class="clients-list reverse">
      <li><a href="#"><img src="clients-6.png"></a></li>
      <!-- repeat 3x -->
    </ul>
  </div>
</section>

Key SCSS tokens

.clients-section { padding: 80px 0; overflow: hidden; }
.clients-list {
  display: flex; gap: 80px; flex-wrap: nowrap;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.clients-list.reverse { animation-direction: reverse; }
.clients-list li img {
  height: 40px; width: auto;
  filter: grayscale(100%); opacity: .55;
  transition: .3s;
}
.clients-list li:hover img { filter: none; opacity: 1; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

Notable details

• Two opposite-direction rows feel more lively than a single rail and disguise the loop seam.
• Logos default to grayscale + 55% opacity, snap to full colour on hover — the de-facto enterprise logo treatment.
• Pure CSS keyframes: no requestAnimationFrame, no library, no battery drain on phones.

Use when

• Trust strips beneath the hero where you want >10 logos to fit without crowding.
• Sites where adding another JS animation library is unjustified.

Caveats

• The seamless loop relies on duplicating the markup 3× — if you change the count, recalculate the 33.333% translate.
• prefers-reduced-motion is not honoured here; wrap the keyframes in a media query before shipping.