Estoy usando GSAP en React, haciendo una animación con ScrollTrigger y MotionPath, necesito la moneda para seguir la ruta SVG desplazándose hacia abajo de principio a fin y luego retroceder al desplazarme hacia arriba. Mientras la moneda está en el camino, siempre debe estar en la pantalla (idealmente en el centro), hasta el final y luego detenerse allí, solo subiendo nuevamente cuando se desplaza hacia arriba desde la parte inferior. Nada demasiado especial realmente.

Mi animación casi llega, pero tengo un problema al final, la moneda comienza a subir antes de que pases el final del camino, y necesito que permanezca allí. Creo que si configuro el extremo de desplazamiento al tamaño del SVG (4000), entonces debería funcionar así, pero cuando lo hago, la moneda comienza a ir más rápido en el medio y sale de la pantalla, por lo que para que permanezca en la pantalla mientras al desplazarme por la ruta, tuve que establecer el final en 7500. No sé cómo hacer que ambas cosas funcionen

Aquí hay una caja de códigos con lo que he estado intentando, mi código hasta ahora

https://codesandbox.io/s/dark-fast-bu7bgu?file=/src/App.js&solutionWidth=526&solutionHeight=675T

¡Gracias!