Open krishbhattacharyya opened 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)
I made something similar:
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>
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.