Create Smooth Infinite Scrolling Lists with CSS

Adding dynamic elements to your website can greatly enhance user experience. One effective way is to use CSS to create an infinite scrolling list (marquee) without relying on JavaScript.

HTML Structure

A simple HTML structure is enough to create a smooth marquee. By duplicating the <ul> list, we can achieve a continuous scrolling effect:

<div class="marquee">
  <ul class="marquee-content">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul class="marquee-content">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

CSS Animation

The marquee animation can be controlled using @keyframes and CSS variables:

.marquee {
  --marquee-gap: 20px;
  --marquee-speed: 5s;
  display: flex;
  overflow: hidden;
  gap: var(--marquee-gap);
  max-width: 100vw;
}
 
.marquee-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  gap: var(--marquee-gap);
  min-width: 100%;
  white-space: nowrap;
  animation: marqueeScrolling var(--marquee-speed) linear infinite;
}
 
@keyframes marqueeScrolling {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% - var(--marquee-gap)), 0, 0); }
}
 
ul li {
  list-style: none;
}

Features & Benefits

Pure CSS: No JavaScript needed for animation.
Infinite Scrolling: The list seamlessly loops back to the start.
Customizable: Adjust speed and gap using CSS variables.
Responsive: Works smoothly on all screen sizes.

Conclusion

Using CSS to create infinite scrolling lists makes your website more modern and dynamic. This technique works perfectly for client logos, portfolio items, or product lists.