So I'm making a music website with a playhead that I've animated to move along the screen and loop back.

.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%
    }
}

Now while the playhead is moving, I want to access its position value, or how far along the screen it is (offsetX), so I can play the notes or whatever at that position.

So if it halfway across the screen, and the screen is 1000px wide, I want to access the 500px value during the animation.

I've tried using useEffect and useRef together, but that only gets called when the animation stops or starts, but not while it is running. So the value stays the same during the animation

I've tried setting up a seperate setInterval for calculating the position only, like so:

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]);

But this is out of sync for some reason. And plus, I'd rather the position values come from the playhead directly.

Is there any way to do this? Thanks!