Replicate the Example from Framer Motion documentation.

// App.tsx

export default function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [rotate, setRotate] = useState(0);

  return (
    <div className="example">
      <div>
        <motion.div
          className="box"
          animate={{ x, y, rotate }}
          transition={{ type: "spring" }}
        />
      </div>
      <div className="inputs">
        <Input value={x} set={setX}>
          x
        </Input>
        <Input value={y} set={setY}>
          y
        </Input>
        <Input value={rotate} set={setRotate} min={-180} max={180}>
          rotate
        </Input>
      </div>
    </div>
  );
}

// Input.tsx

export function Input({
  value,
  children,
  set,
  min = -200,
  max = 200
}: InputProps) {
  return (
    <label>
      <code>{children}</code>
      <input
        value={value}
        type="range"
        min={min}
        max={max}
        onChange={(e) => set(parseFloat(e.target.value))}
      />
      <input
        type="number"
        value={value}
        min={min}
        max={max}
        onChange={(e) => set(parseFloat(e.target.value) || 0)}
      />
    </label>
  );
}

Note: The code will be the same for both of my replications below, just in different versions.

In Framer Motion version 9.0.0 and older, when changing the value suddenly, the .box div move/ rotate smoothly. Try it in my Replication version 9.0.0 that I have deployed with Framer Motion version 9.0.0. (GitHub repository)

However, in Framer Motion from version 10.0.0, the .box div responds slower than expected and only move/ rotate properly when I stop changing the value or click to change the value. Try it in my Replication version 10.0.0 that I have deployed with Framer Motion version 10.0.0. (GitHub repository)

My replications is 100% based on the Example from Framer Motion documentation but with different Framer Motion versions.

I would love to have an explanation on why this happens and any possible way to fix it. Thank you.