Create an Infinite Horizontal Scroll Animation with Tailwind CSS

 class="w-full inline-flex flex-nowrap">
     class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none">
        

             src="./facebook.svg" alt="Facebook" />
        
        

             src="./disney.svg" alt="Disney" />
        
        

             src="./airbnb.svg" alt="Airbnb" />
        
        

             src="./apple.svg" alt="Apple" />
        
        

             src="./spark.svg" alt="Spark" />
        
        

             src="./samsung.svg" alt="Samsung" />
        
        

             src="./quora.svg" alt="Quora" />
        
        

             src="./sass.svg" alt="Sass" />
        
                    

Each list item will represent a company’s logo, and we’ve added the alt attribute to every image to ensure accessibility.

The ul element has the classes flex and items-center, which make the logos stand in a row and be vertically centered.

Additionally, we’ve used some arbitrary Tailwind CSS variants to optimize the layout:

• [&_li]:mx-8 adds a horizontal margin of 32px to each list item
• [&_img]:max-w-none removes the default 100% maximum width applied to images, preserving their original size, even on smaller screens

Define the animation

Defining the animation is straightforward. All we need to do is translate the ul element to the left from 0 to -100%. However, Tailwind CSS doesn’t provide this specific animation out-of-the-box, so we’ll define it ourselves in our tailwind.config object.

Typically, you’d have a tailwind.config.js file in your project’s root directory. But since we’re using the Tailwind CDN, we’ll define the tailwind.config object within a script tag in our HTML file.

tailwind.config = {
    theme: {
    extend: {
        animation: {
        'infinite-scroll': 'infinite-scroll 25s linear infinite',
        },
        keyframes: {
        'infinite-scroll': {
            from: { transform: 'translateX(0)' },
            to: { transform: 'translateX(-100%)' },
        }
        }                    
    },
    },
}

We’ve named the animation infinite-scroll, and it’s a linear, infinite, and lasts for 25 seconds. We’ve also specified the keyframes of the animation, to translate from 0 to -100%.

Using this animation is as easy as adding the class animate-infinite-scroll to the element you wish to translate. In our case, that’s the ul element.

Make the animation loop

Now, if you preview the page, you’ll see that the animation works like a charm! But there’s one tiny hiccup – when the ul element reaches -100%, it suddenly jumps back to 0, breaking the seamless flow.

To avoid that, we’ll duplicate the ul element and position it right after the existing one. This way, when the animation reaches -100%, the duplicate element takes over, ensuring the animation continues without any disruptions.

We know redundant elements in HTML are a no-no, so for now, let’s add the aria-hidden="true" attribute to the duplicated element, making it invisible to screen readers. Later, we’ll use some just a bit of JavaScript to create the duplicate element dynamically.

 class="w-full inline-flex flex-nowrap">
     class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
        

             src="./facebook.svg" alt="Facebook" />
        
        

             src="./disney.svg" alt="Disney" />
        
        

             src="./airbnb.svg" alt="Airbnb" />
        
        

             src="./apple.svg" alt="Apple" />
        
        

             src="./spark.svg" alt="Spark" />
        
        

             src="./samsung.svg" alt="Samsung" />
        
        

             src="./quora.svg" alt="Quora" />
        
        

             src="./sass.svg" alt="Sass" />
        
    
     class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
        

             src="./facebook.svg" alt="Facebook" />
        
        

             src="./disney.svg" alt="Disney" />
        
        

             src="./airbnb.svg" alt="Airbnb" />
        
        

             src="./apple.svg" alt="Apple" />
        
        

             src="./spark.svg" alt="Spark" />
        
        

             src="./samsung.svg" alt="Samsung" />
        
        

             src="./quora.svg" alt="Quora" />
        
        

             src="./sass.svg" alt="Sass" />