I'm working on creating a marquee animation using Tailwind CSS and Next.js, and I've made some progress. However, the issue I'm facing is that the items are not displaying one after the other smoothly; there seems to be a delay when the second item appears.
What I want it to look like: https://i.stack.imgur.com/5AKUJ.png but currently, it looks like this https://i.stack.imgur.com/x48lE.png.
Below is the Tailwind CSS code:
.animate-marquee {
animation: marquee 10s linear infinite;
float: left;
}
Here is the component code:
import { useRouter } from "next/router";
import pathChecking from "../../utils/pathChecking";
import Image from "next/image";
const testimonial_data = [
{
desc: "Inform, inspire, connect, and collaborate for meaningful action.",
id: "0General Partner at Entrepreneur",
},
{
desc: "Addressing the world’s biggest environmental and social challenges.",
id: "1General Partner at Entrepreneur",
},
{
desc: "Fun, interactive, and immersive technology for real-world positive outcomes. ",
id: "2General Partner at Entrepreneur",
},
];
const HeroSliderComponent = () => {
const route = useRouter();
return (
<>
<div className=" flex animate-marquee space-x-8 w-10000">
{testimonial_data.map((item, index) => {
const { id, img, title, desc, name } = item;
return (
<div className="text-white" key={id}>
<div
className={`relative rounded-2.5xl border border-jacarta-100 bg-white p-12 transition-shadow hover:shadow-xl dark:border-jacarta-700 dark:bg-jacarta-700 `}
>
<p className="block font-display text-xl font-medium group-hover:text-accent dark:text-white text-center">
{desc}
</p>
</div>
</div>
);
})}
</div>
</>
);
};
export default HeroSliderComponent;
I'm aiming for an infinite marquee with smooth transitions between items.