I have elements in a tailwind div like so
<code> const arrr = [...Array(50).keys()]
<div className="grid grid-cols-2 lg:grid-cols-4 h-56 bg-white overflow-x-auto rounded-xl py-5 gap-y-3 gap-x-3 justify-start lg:gap-5">
{arrr.map((el, index) => (
<motion.span
key={el}
initial={{ y: 0 }}
animate={{
y: [0, -700],
transition: {
y: {
repeat: Infinity,
repeatType: "loop",
duration: 10,
ease: "linear",
},
},
}}
className=" break-inside flex flex-shrink-0 cursor-default select-none bg-yellow-100 lg:bg-yellow-200 rounded-full px-5 py-2 font-medium "
>
Element {el}
</motion.span>
))}
</div>
</code>
<code> const arrr = [...Array(50).keys()]
<div className="grid grid-cols-2 lg:grid-cols-4 h-56 bg-white overflow-x-auto rounded-xl py-5 gap-y-3 gap-x-3 justify-start lg:gap-5">
{arrr.map((el, index) => (
<motion.span
key={el}
initial={{ y: 0 }}
animate={{
y: [0, -700],
transition: {
y: {
repeat: Infinity,
repeatType: "loop",
duration: 10,
ease: "linear",
},
},
}}
className=" break-inside flex flex-shrink-0 cursor-default select-none bg-yellow-100 lg:bg-yellow-200 rounded-full px-5 py-2 font-medium "
>
Element {el}
</motion.span>
))}
</div>
</code>
const arrr = [...Array(50).keys()]
<div className="grid grid-cols-2 lg:grid-cols-4 h-56 bg-white overflow-x-auto rounded-xl py-5 gap-y-3 gap-x-3 justify-start lg:gap-5">
{arrr.map((el, index) => (
<motion.span
key={el}
initial={{ y: 0 }}
animate={{
y: [0, -700],
transition: {
y: {
repeat: Infinity,
repeatType: "loop",
duration: 10,
ease: "linear",
},
},
}}
className=" break-inside flex flex-shrink-0 cursor-default select-none bg-yellow-100 lg:bg-yellow-200 rounded-full px-5 py-2 font-medium "
>
Element {el}
</motion.span>
))}
</div>
I need when the animation is at 49 the 0 index element should be there to continue the loop. Without the user noticing the loop has ended. Also the elements can be staggered not exactly ordered like in illustration. Key is when the last element is reached the first element should be there to continue
Basically something like this, notice the no collision but items are staggered and user would not know if they are seeing a fresh element unless they are really keen. Smooth in, to out