search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.63k stars 750 forks source link

[BUG] dynamic `layout` does not work whithout remount #2567

Open flex-mookeun opened 3 months ago

flex-mookeun commented 3 months ago

1. Read the FAQs 👇 check

2. Describe the bug

(Not sure this is a bug or intended behavior, so please let me know if it is intended.) If layout is changed to true after mount, motion.div does not animate. In case layout is set to true on mount, it does animate as expected.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-virtual-hgzcgz?file=%2Fsrc%2FApp.tsx%3A9%2C11

4. Steps to reproduce

  1. Click "Add" couple of times to add items with no layout prop set
  2. Click "Toggle" button to set layout to true for next items.
  3. Click "Add" again to more items.
  4. Items added in step 1 do not animate

5. Expected behavior Items animate for layout changes even if layout prop is changed to true dynamically.

6. Video or screenshots

https://github.com/framer/motion/assets/99154189/75f3d441-160c-4e8c-9fb6-b05fc6787bd9

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.