children still given random position with scatterRandomly=false
Opened this issue · 1 comments
Perhaps I'm misunderstanding the prop or the goals of this library, but I'm looking to add marquee scroll to a horizontal list of items.
<Marquee
velocity={30}
minScale={1}
maxScale={1}
scatterRandomly={false}
>
{customSortedIDPs(providers).map((provider) => (
<div key={provider.value} className={styles.providerContainer}>
<img
src={provider.iconUrl}
className={styles.providerLogo}
alt={provider.label}
/>
</div>
))}
</Marquee>
But, based on these few lines, it seems like the y positioning is still randomized?
setChildrenPosition((state) => [
...state,
{
x: randomIntFromInterval(0, containerSize.width),
y: randomIntFromInterval(0, containerSize.height),
},
]);
https://github.com/mxmzb/react-marquee-slider/blob/master/src/Marquee.tsx#L140-L146
The result is that a couple of my child elements are at random y positions, while I want them to all be aligned as they are without the Marquee.
before:
with marquee
Am I misunderstanding something here?
I've got this on a deploy preview here -https://603fb29b59591d0008953720--osso.netlify.app/
Interestingly the other place I use this further down the page doesnt have the same issue, so perhaps this is an error in userland, but i cant track it down.
I was able to solve this by targeting the created divs with css and using flex. super unclear 🤷♂️
.parent > div > div {
display: flex;
justify-content: space-evenly;
}