gh-svg | exporting geometry from Grasshopper/Rhino to SVG data format | Animation library

There are relatively straightforward ways of accomplishing this in vanilla Javascript (see this for one such approach), but I'm struggling getting something like this to work in React, particularly with an animation library like Framer Motion.

Framer Motion's useViewPortScroll returns a handy scrollYProgress object whose "current" property tells you what percentage down the page the user is currently scrolled.

I'd like to use this property to do something like this: const pts = path.getPointAtLength(scrollPercentage * pathLength);, and then use pts.x and pts.y for the x and y attributes of, say, a circle SVG - so every time I scroll down (or up) the page, the position of the circle would update/animate along the SVG path.

I'm struggling getting this to work with React's more declarative style, as I'd have to use refs for both the circle and the path elements, meaning I would have to place the aforementioned pts = path.getPointAtLength... code inside of a useEffect call, with both refs as dependencies (or else the refs would be undefined, in which case the pts.x and pts.y properties on x and y of my circle SVG would be inaccessible on first render.

Has anyone solved a similar problem or could possibly provide guidance?