Brand Logo Carousel with Fading Effect and Infinite Looping

A responsive and modern brand logo carousel using plain HTML and CSS3 animations.

It features a smooth, infinite loop with a subtle fade effect at the edges.

This type of Carousel has been widely used in SaaS products or landing pages to:

• Show various product features or service offerings with icons or logos.
• Highlight testimonials using company logos or user avatars.
• Display sponsors’ logos at events or conferences.

How to use it:

1. Add your logos to the carousel. Each logo should be wrapped in a <div> with a class name for styling purposes. In this example, I use brandLogo. To create the infinite loop effect, you need to duplicate the set of original logos. Here’s the basic HTML structure:

<div class="brandsCarousel">
  <div class="carouselTrack">
    <div class="brandLogo">
      SVG Logo 1
    </div>
    <div class="brandLogo">
      SVG Logo 1
    </div>
    <div class="brandLogo">
      SVG Logo 3
    </div>
    ... more logos here ...
    <div class="brandLogo">
      SVG Logo 1
    </div>
    <div class="brandLogo">
      SVG Logo 1
    </div>
    <div class="brandLogo">
      SVG Logo 3
    </div>
    ... more logos here ...
  </div>
</div>

2. Add the necessary CSS styles to your stylesheet. This CSS provides the animation, layout, and fade effects:

• Keyframe Animation: The @keyframes infiniteLoop defines the animation. This moves the carousel track horizontally across the screen. The translate3d function improves performance by using GPU acceleration.
• Infinite Animation: The animation: infiniteLoop 10s linear infinite property applies the animation continuously. The linear timing function keeps the movement at a steady pace.
• Faded Edges: The ::before and ::after pseudo-elements create a linear gradient overlay on the left and right edges of the carousel. This effect simulates a fade as the logos enter and exit.
• Carousel Track: The carouselTrack element is wider than the visible area. This contains all the logos, both original and cloned, ensuring seamless looping.
• Logo Styling: The brandLogo class contains the basic styling for the individual logo containers.

@keyframes infiniteLoop {
  0% {
      transform: translate3d(0, 0, 0);
  }
  100% {
      transform: translate3d(calc(-100px * 10), 0, 0);
  }
}
.brandsCarousel {
  max-width: 960px;
  max-height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.brandsCarousel::before,
.brandsCarousel::after {
  content: "";
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, rgba(250, 250, 240, 1) 0%, rgba(250, 250, 240, 0) 100%);
  position: absolute;
  z-index: 2;
}
.brandsCarousel::before {
  top: 0;
  left: 0;
}
.brandsCarousel::after {
  top: 0;
  right: 0;
  transform: rotateZ(180deg);
}
.carouselTrack {
  width: calc(100px * 20);
  animation: infiniteLoop 10s linear infinite;
  animation-fill-mode: forwards;
  will-change: transform;
}
.brandLogo {
  width: 100px;
  height: 50px;
  align-items: center;
  margin: auto;
  overflow: hidden;
}
.brandLogo svg {
  width: 100px;
  height: 50px;
}