Pure SCSS Infinite Image Marquee Animation (Fully Responsive)

Need a smooth, CSS-only scrolling image track for client logos, service banners, or media streams? This is a lightweight, pure SCSS solution for an infinite marquee. It requires zero JavaScript, making it perfect for 100/100 PageSpeed scores, and it handles mobile responsiveness effortlessly.

The HTML Structure Make sure to duplicate your images inside the track so the loop is perfectly seamless.

<div class="marquee-container">
  <div class="marquee-track">
    <img src="image1.png" alt="Stream 1" />
    <img src="image2.png" alt="Stream 2" />
    <img src="image3.png" alt="Stream 3" />
    <img src="image4.png" alt="Stream 4" />
    <img src="image1.png" alt="Stream 1" />
    <img src="image2.png" alt="Stream 2" />
    <img src="image3.png" alt="Stream 3" />
    <img src="image4.png" alt="Stream 4" />
  </div>
</div>

The SCSS Logic This utilizes flexbox and a translateX(-50%) animation to ensure the image track never breaks or jumps, regardless of the screen size.

$animation-speed: 25s;

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 30px 0;
  display: flex;
  align-items: center;
  background: transparent;
}

.marquee-track {
  display: inline-flex;
  gap: 50px;
  padding-right: 50px; /* matches gap */
  animation: scrollLeft $animation-speed linear infinite;
  
  img {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
    cursor: pointer;
    
    &:hover {
      filter: grayscale(0%) opacity(1);
    }
  }
}

/* Pause animation on hover */
.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .marquee-track {
    gap: 30px;
    padding-right: 30px;
  }
  .marquee-track img {
    height: 45px;
  }
}