'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 |
|---|
