Skip to content

children still given random position with scatterRandomly=false #14

@sbauch

Description

@sbauch

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:

Screen Shot 2021-03-03 at 10 42 45 AM

with marquee

Screen Shot 2021-03-03 at 10 43 00 AM

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions