Tailwind Infinite Horizontal Scroll Through Items - scroll

Question

I am new to tailwind, so I apologize for this question ahead of time. I am trying to convert existing CSS animations into tailwind. Specifically, how can I create an infinite scroll through a list of items using tailwind? I found this youtube video which accomplishes the exact behavior I would like. If possible how can this be implemented using Tailwind. I tried to search for something along the lines of "infinite scroll" or "carousel" but I couldn't find any other examples except for this video.

Answer 1

I initially struggled with the video instructions. The video instructs to provide a flex box with a width of 200%. Tailwind's config allows me to extend the width in specific pixels; however, I was unable to get it working with percentages.
After some time I found this website which shows a method that only requires extending configure the keyframes and animation like so.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
keyframes: {
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
},
marquee2: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(0%)' },
},
},
animation : {
'spin-slow-30': 'spin 30s linear infinite',
'spin-slow-25': 'spin 25s linear infinite',
'spin-slow-10': 'spin 10s linear infinite',
'marquee-infinite' : 'marquee 25s linear infinite',
},
},
},
plugins: [],
}
Once set I am then able to define a new component in react. Given the layout of the items, two rows are needed to expand across the width of the screen. I've repeated these items several items per row to achieve 2x the width of the screen otherwise the marquee illusion will break as there isnt enough items to traverse the entire screen.
import React from 'react'
import item1 from '../assets/carousel/1.png'
import item2 from '../assets/carousel/2.png'
import item3 from '../assets/carousel/3.png'
import item4 from '../assets/carousel/4.png'
import item5 from '../assets/carousel/5.png'
const ScrollCarousel = () => {
return (
<>
<div className='mb-96'>
<div className="relative w-full p-16 overflowx-hidden">
<div className="flex absolute left-0 animate-marquee-infinite">
<div className='flex w-96 justify-around'>
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
</div>
<div className='flex w-96 justify-around'>
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
<img src={item1} alt="" />
<img src={item2} alt="" />
<img src={item3} alt="" />
<img src={item4} alt="" />
<img src={item5} alt="" />
</div>
</div>
</div>
</div>
</>
)
}
export default ScrollCarousel