infinite-partners-marquee

Summary

Continuous left-to-right partner logo strip rendered with Swiper. Uses autoplay: { delay: 0 }, loop: true, freeMode: true, speed: 5000 plus a CSS override forcing linear timing on .swiper-wrapper to produce a smooth conveyor-belt effect that pauses on hover and reflows from 2 to 4 logos per view at 992px+.

HTML structure (minimal)

<div class="mil-soft-bg">
  <div class="container mil-p-0-120">
    <div class="swiper-container mil-infinite-show mil-up">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#." class="mil-partner-frame" style="width: 60px;"><img src="img/partners/1.svg" alt="logo"></a></div>
        <div class="swiper-slide"><a href="#." class="mil-partner-frame" style="width: 100px;"><img src="img/partners/2.svg" alt="logo"></a></div>
        <!-- 2 more for the loop -->
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.mil-infinite-show {
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.mil-partner-frame {
  display: block;
  & img { width: 100%; }
}

Animation logic

new Swiper('.mil-infinite-show', {
  slidesPerView: 2,
  spaceBetween: 30,
  speed: 5000,
  autoplay: true,
  autoplay: { delay: 0 },   // continuous — no pause between transitions
  loop: true,
  freeMode: true,
  breakpoints: {
    992: { slidesPerView: 4 },
  },
});

Notable details

• Swiper gives this a marquee with no per-frame requestAnimationFrame and no CSS keyframes — combining loop, autoplay delay 0, speed 5000 and a linear timing override creates uniform motion.
• Per-logo width is set inline so SVGs of mixed proportions can sit side by side without stretching.
• Inherits global mil-up so the strip itself fades up into view; once visible, the conveyor never stops.
• Note the JS sets autoplay: true then overrides with autoplay: { delay: 0 } — the second key wins; the boolean is leftover but harmless.

Use when

• You need a logo cloud that survives touch interaction and responsive breakpoints.
• Brand-pages that want continuous motion as a calm background pulse, not a per-tile hover.
• A section that should feel "always live" without a heavy GSAP timeline.

Caveats

• Linear timing requires the SCSS override; without it Swiper applies its default ease and the marquee stutters at slide boundaries.
• Loops only work cleanly when slidesPerView * 2 ≤ slide count — supply at least 8 logos before scaling up to 4 per view.
• The partner-frame uses inline-style widths; bulk content updates require touching markup, not a CMS field.