Estoy tratando de crear un carrusel de texto en bucle con React Spring. Lo intenté con un <h1 /> y una matriz de <span /> dentro de un <div /> , pero no obtuve una animación fluida.

Código actual:

 import React from "react"; import { animated, useSprings } from "react-spring"; interface CarouselProps { className?: string; } const Carousel: React.FC<CarouselProps> = ({ className }) => { const string = [ "a", "b", // ... "y", "z", ]; const springs = useSprings( string.length, string.map((_, i) => ({ loop: true, from: { translateX: "100%" }, to: { translateX: "-100%" }, config: { duration: 3000 }, delay: (i + 1) * 100, })) ); return ( <div className={className}> <h1 className="w-48 bg-red-500 flex items-center"> {springs.map((styles, i) => ( <animated.p key={i} style={styles}> {string[i]} </animated.p> ))} </h1> </div> ); }; export default Carousel;

Este es el ejemplo que estoy tratando