After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me.
Typically, we aim to implement this feature to showcase previous clients or portfolio items.
The current implementation works but there is always a stutter every time it loops through the array of images. Below is my React components:
const clients = [
{
name: 'google',
logo: Google,
},
// Additional client objects
];
<div className='overflow-hidden py-8'>
<div className='flex animate-left'>
<div className=" flex w-max gap-8 mr-4">
{clients.map((client, index) => (
<a key={index} href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem] ">
<Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
</a>
))}
</div>
<div className=" flex w-max gap-8 ">
{clients.map((client, index) => (
<a key={index} href="#" className="flex justify-center items-center shadow-md rounded-xl p-6 w-[10rem] ">
<Image src={client.logo} alt={client.name} width={100} height={100} className="w-full h-full object-contain" />
</a>
))}
</div>
</div>
</div>
Here's my Tailwind config :
extend: {
animation: {
'left': 'bannermoveleft 20s linear infinite',
},
keyframes: {
bannermoveleft: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-50%)' },
}
},