Estoy tratando de crear un carácter de texto animado por carácter para que rebote de derecha a izquierda, pero necesito agregar un retraso diferente a cada carácter. Hasta ahora, la animación se ve bien, el problema es que el retraso no se actualiza para cada carácter.

Este es mi código:

 import React from "react"; import { useSprings, animated } from "react-spring" import s from '../../styles/pages/home.module.scss' // HERE CREATE AN ARRAY CHAR BY CHAR INCLUDING " ", FROM A STRING let textString = "Random text for this example." let textArray = Array.from(textString) const HeroText = () => { const springs = useSprings( textArray.length, textArray.map((item, i)=> ({ id : i, from : {opacity: 0, translateX : '1000px'}, to: {opacity: 1, translateX : '0px'}, delay: (0.5 + i / 10), config: { mass: 4, tension: 200, friction: 30} })) ) let elements = springs.map((spring, i) => { console.log(spring) return( <animated.span key={i} style={{...spring}}> {textArray[i] === ' ' ? <span>&nbsp;</span> : textArray[i]} </animated.span> ) }) return( <div className={s.heroText}> <h1 className={"my-heading divided-heading"}> {elements} </h1> </div> ) } export default HeroText

En console.log(spring) , en realidad puedo ver que todos los objetos tienen diferentes valores de "retraso", pero en el renderizado todos se animan al mismo tiempo, por lo que no parece que el texto esté animado carácter por carácter.

He leído la documentación de react-spring pero no me pareció muy útil, por lo que si alguien puede ayudarme a entender lo que me estoy perdiendo, me alegraría. ¡Gracias!