motion
motion copied to clipboard
[BUG] AnimatePresence `mode="popLayout"` assumes LTR, works differently/unexpectedly in RTL
1. Read the FAQs 👇
✅
2. Describe the bug
There is code in AnimatePresence's mode="popLayout" behavior that assumes the current text direction is LTR, because it sets the left property instead of inset-inline-start.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/x4hf8j
4. Steps to reproduce
- Click on "Toggle Second Column" a few times to see the enter animation of the second column. Notice the container expands and the column fades in, but it doesn't move.
- Click on "Toggle Direction" to set the direction to RTL.
- Click on "Toggle Second Column" a few times to see the enter animation of the second column in RTL direction. Notice the second column now moves from right to left as it fades in.
5. Expected behavior
The second column should not move as it fades in in RTL direction.
6. Video or screenshots
https://github.com/user-attachments/assets/54fc1195-0aeb-42f3-b817-7da480c491f0
7. Environment details
Chrome 131.0.6778.205 on macOS.