I am using framer motion in react and I need to make it responsive in different animated positions.

  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,
      },
    },
  };

here is my component code

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

this is the motion code I just wanted to add axis value with CSS units in vh and vw but it didn't work. I just want to make the animation responsive on any window, so any kind of suggestion may help.

I want to add the below value to my axis

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