Repository navigation
[BUG] useTransform does not reflect update of chained MotionValues #2280
Description
I am building a complicated animation, where a transform depends on several motion values. These values are sometimes repeating, so I extracted them to separate motion values, which are calculated using useTransform. I have managed to reproduce the issue with a very simple example:
const a = useMotionValue(0);
const aHalf = useTransform(a, (a) => a / 2);
const aQuarter = useTransform(aHalf, (h) => h / 2);
const result = useTransform([a, aQuarter], ([a, aQuarter]) => {
// the aQuarter MotionValue is eventually updated to `25`, but it is never reported here. This will log `100, 0` instead of `100, 25`
console.log({ a, aQuarter });
return a + aQuarter;
});
useMotionValueEvent(a, "change", (v) => console.log("a", "change", v));
useMotionValueEvent(aQuarter, "change", (v) => console.log("aQuarter", "change", v));
useMotionValueEvent(result, "change", (v) => console.log("result", "change", v));
React.useEffect(() => {
setTimeout(() => a.set(100), 500);
}, []);
Here is a Codesandbox of the same: https://codesandbox.io/s/framer-motion-enter-animation-forked-4jfkdc?file=/src/App.tsx
If you check the logs you will notice:
a change 100
{a: 100, aQuarter: 0}
result change 100
aQuarter change 25
As you can see, the useTransform for result never logs the aQuarter value of 25, while the same is being reported by useMotionValueEvent. This issue results in the transform outputting an incorrect value for result of 100, while it is supposed to be 125.
Activity
piotrnajda3000 commentedon Aug 20, 2024
I concur.
I have the following transform:
Even though
progressreaches1,headingScaleis shy of it's needed target (9in this example).mordechaim commentedon Oct 13, 2026
Ran into this issue today, chained transforms 3 levels deep skipped a frame