Así que estoy creando un sitio web de música con un cabezal de reproducción que he animado para que se mueva a lo largo de la pantalla y retroceda.

 .playhead { position: absolute; border-left: 0.2em solid; min-height: calc(100% - var(--display-border-width)); border-color: red; animation: play-animation 4s linear infinite; } @keyframes play-animation { 0% { left: 0%; } 100% { left: 100% } }

Ahora, mientras se mueve el cursor de reproducción, quiero acceder a su valor de posición, o qué tan lejos está de la pantalla ( offsetX ), para poder tocar las notas o lo que sea en esa posición.

Entonces, si está en la mitad de la pantalla y la pantalla tiene 1000 px de ancho, quiero acceder al valor de 500 px durante la animación.

Intenté usar useEffect y useRef juntos, pero solo se llama cuando la animación se detiene o comienza, pero no mientras se está ejecutando. Entonces el valor permanece igual durante la animación.

Intenté configurar un setInterval separado solo para calcular la posición, así:

 useEffect(() => { if (props.play) { const markers = (playTime * 1000) / frameRate; const percentToAdd = 100 / markers; const id = setInterval(() => {setProgress((prev) => (prev + percentToAdd) % 100)}, frameRate); setIntervalID(id); } else { if (intervalID !== 0) { clearInterval(intervalID); } } }, [props.play]);

Pero esto no está sincronizado por alguna razón. Y además, prefiero que los valores de posición provengan directamente del cursor de reproducción.

¿Hay alguna manera de hacer esto? ¡Gracias!