justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://react-fast-marquee.com
MIT License
1.16k stars 95 forks source link

start position with direction #71

Open krishbhattacharyya opened 1 year ago

krishbhattacharyya commented 1 year ago

This is only question not an issue.

We have the option to set the direction but do we have the option to set the start position?

For an example - Direction is left - but the starting children animation would start from the right side of the container that means end of the container and reach to left.

May be we can add a gap using first child but this child also appear in next time within the loop that would not expected.

navs-github commented 1 year ago

similar usecase, i would like to control the position of the marquee on render (so I can have it start all the way off the to right)

nodegin commented 2 months ago

I made something similar:

341889423-7fee7876-eaab-4672-bac0-53bfd5d4b46b

Here is the concept by using rtl:

<style>{`
  @keyframes marqueeScrollRight {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
  }
`}</style>
<Marquee
  style={{ direction: 'rtl' }}
  className="relative [&>.rfm-marquee:nth-child(2)]:!animate-[marqueeScrollRight_var(--duration)_linear_var(--delay)_1] [&>.rfm-marquee:nth-child(3)]:!animate-[marqueeScrollRight_var(--duration)_linear_var(--delay)_1]"
>
  ...
</Marquee>