const MARQUE_DATA = ["WEBSITE", "AR", "MOBILE APP", "IOT", "VR"];
const Marquee = ({ data }: { data: string[] }) => {
const wrapper = useRef<HTMLDivElement>(null);
const inner = useRef<HTMLDivElement>(null);
const q = gsap.utils.selector(inner);
useEffect(() => {
gsap.to(q("span"), {
x: 500,
duration: 8,
repeat: -1,
});
}, []);
return (
<div ref={wrapper} className={styles.marqueeWrapper}>
<div ref={inner} className={styles.marqueeInner}>
{data.map((text, i) => (
<span key={i}>
{text} |
</span>
))}
</div>
</div>
);
};
the rendered span doesnt animate if i use map like the code above, but when i try to hardcode the spans like
<span>FOO</span>
<span>BAR</span>
<span>BEAR</span>
this it does work as expected. any help apreciated !
