Estoy usando el movimiento del marco en reacción y necesito que responda en diferentes posiciones animadas.

 const welcomeBallVariants = { visible: { x: [0, 0, -100, -50, 100, 50, -75], y: [0, 500, 300, 500, 300, 500, 347], rotate: 360, transition: { duration: 1, rotate: { duration: 1, repeat: 3, type: "tween", ease: "linear", }, delay: 1.5, }, }, };

aquí está mi código de componente

 <motion.img src={WelcomePageBall} alt="WelcomePageBall" variants={welcomeBallVariants} initial="hidden" animate="visible" />

este es el código de movimiento. Solo quería agregar valor de eje con unidades CSS en vh y vw, pero no funcionó. Solo quiero que la animación responda en cualquier ventana, por lo que cualquier tipo de sugerencia puede ayudar.

Quiero agregar el siguiente valor a mi eje.

 x:["0vw", "100vw"]