'Change animation duration without reset on framer-motion

I'm trying to slow down an infinite animation using framer-motion by changing the duration value in the transition prop. I'm using the useMotionValue hook and the animate function:

const [count, setCount] = useState(1);

const scale = useMotionValue(1);

React.useEffect(() => {
  // the [1, 2] is for [from, to]
  const controls = animate(scale, [1, 2], {
    repeat: Infinity,
    ease: "linear",
    duration: count
  });

  return controls.stop;
}, [scale, count]);

The problem here is that my animation reset from the beginning.

If I don't set any from value (animate(scale, 2, ...)) it doesn't reset, but the beginning on the next repeat will be the last value just before the duration changes. (eg. I reset when scale is value is 1.5 and my animation will loop between 1.5 and 2 instead of 1 and 2)

I've made a repro here: https://codesandbox.io/s/framer-motion-simple-animation-forked-n8pbb?file=/src/index.tsx



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source