Describe the bug
When using AnimatePresence and nested motion.div components, position transform will stop working in the initial to animate transition. You can see this in this sandbox. Compare this to this sandbox, which doesn't use AnimatePresence and works as expected. This might be related to issue #258 , but while that was fixed 12 days ago, this issue still persists as of v1.5.0 and v.1.6.0-beta1.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The position transform should smoothly transition between initial and animate values.
Desktop (please complete the following information):
Retitled for accuracy - the bug is actually in the unit conversion and can be replicated without AnimatePresence
Practically you can fix this now by setting the other y to "0%".
A bug fix for this could be to skip unit conversion when animating to/from 0. This wouldn't solve, for instance "50%" to "50px" but it would yield performance benefits from not having to measure the DOM. The issue might be partly due to the component being unmeasurable during this the measurement (as the parent begins with height: 0) but this would need further investigation.
Example works in latest, closing
Most helpful comment
Retitled for accuracy - the bug is actually in the unit conversion and can be replicated without
AnimatePresencePractically you can fix this now by setting the other
yto"0%".A bug fix for this could be to skip unit conversion when animating to/from
0. This wouldn't solve, for instance "50%" to "50px" but it would yield performance benefits from not having to measure the DOM. The issue might be partly due to the component being unmeasurable during this the measurement (as the parent begins withheight: 0) but this would need further investigation.