Logos: infinite marquee

What you receive in Webflow

• 20 native elements and 5 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• 1 Embed element keeps the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="lm">
  <p class="lm-caption">Trusted by product teams at</p>
  <div class="lm-track">
    <div class="lm-row">
      <span class="lm-logo">Lumen</span><span class="lm-logo">Halcyon</span><span class="lm-logo">Orbit&amp;Co</span><span class="lm-logo">Parallel</span><span class="lm-logo">Kitewire</span><span class="lm-logo">Mosaic</span><span class="lm-logo">Northbeam</span>
      <span class="lm-logo">Lumen</span><span class="lm-logo">Halcyon</span><span class="lm-logo">Orbit&amp;Co</span><span class="lm-logo">Parallel</span><span class="lm-logo">Kitewire</span><span class="lm-logo">Mosaic</span><span class="lm-logo">Northbeam</span>
    </div>
  </div>
</section>
<style>
.lm { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #0a0a0a; padding: 72px 0; overflow: hidden; }
.lm-caption { text-align: center; color: #737373; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 32px; }
.lm-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.lm-row { display: flex; width: max-content; animation: lm-scroll 32s linear infinite; }
.lm-track:hover .lm-row { animation-play-state: paused; }
.lm-logo { flex-shrink: 0; padding: 0 40px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #d4d4d4; white-space: nowrap; transition: color 0.2s ease; }
.lm-logo:hover { color: #ffffff; }
@keyframes lm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) { .lm { padding: 56px 0; } .lm-logo { font-size: 20px; padding: 0 24px; } }
</style>