Estoy tratando de reproducir un efecto en la animación GSAP que está escrito en html para reaccionar.

Aqui esta el link

https://codepen.io/GreenSock/pen/QEdpLe

El problema es que en javascript normal a diferencia de react. GSAP puede acceder al elemento dom por classname dado.

gsap.to(".box", {...})

caja puede ser varios elementos.

Pero al reaccionar para obtener los datos, necesito usar useRef hook. Así que doy una referencia al componente principal y animo los elementos secundarios.

 let boxAnimate = (selectedEl) => { gsap.to(selectedEl.current.children, { duration: 10, ease: "none", x: "-=600", //move each box 500px to right modifiers: { x: gsap.utils.unitize((x) => parseFloat(x) % 600), //force x value to be between 0 and 500 using modulus }, repeat: -1, }); }; gsap.set(inifiteRef.current.children, { backgroundColor: (i) => colors[i % colors.length], x: (i) => i * 50, }); boxAnimate(inifiteRef); }, []);

Pero no me está dando el efecto de deseo.

Mi efecto deseo. Cuando el número desaparezca en la línea de meta, debería volver a aparecer desde el principio.

Qué sucede: todos los números desaparecen y todos vuelven a aparecer.

 <div style={{ color: "red", fontSize: "40px", height: "50px", width: "600px", overflow: "hidden", display: "flex", flexDirection: "row", justifyContent: "space-between", }} ref={inifiteRef} > <div style={{ width: "50px" }}>1</div> <div style={{ width: "50px" }}>2</div> <div style={{ width: "50px" }}>3</div> <div style={{ width: "50px" }}>4</div> <div style={{ width: "50px" }}>5</div> <div style={{ width: "50px" }}>6</div> <div style={{ width: "50px" }}>7</div> </div>

¿Hay algo mal con mi código?