How to transition a motion.div between containers with overflow-y: auto set

[wilson-webdev]

I have a trello-style column layout. Each item is a motion.div with a unique layoutId prop. As you can see from the below videos, when overflow-y: auto is set, you cannot see the items transitioning between columns. Each column must be individually scrollable, so I can't just set the overflow on the outer div. Some tips would be great! 😃

CodeSandbox

https://codesandbox.io/s/framer-motion-2-layout-animations-forked-n41fe2?file=/src/App.js

overflow-y: auto

Screen.Recording.2022-08-11.at.21.05.43.mov

overflow-y: initial

Screen.Recording.2022-08-11.at.21.05.18.mov

[marcinskubis]

I got a same problem. Did you manage to come up with a solution?

[wilson-webdev]

Unfortunately not, sorry! I was only experimenting with some features, hopefully you can find a solution!

[alexsafayan]

@marcinskubis did you find a solution?

[marcinskubis]

@marcinskubis did you find a solution?

Nope 😕

[alexsafayan]

React's createPortal looks promising

[altrugon]

Has anybody found a solution for this?
I did try createPortal() but ended up in the same situation. The animated container is only visible when entering the destination container that has overflow set, or its parent has it.

[alexsafayan]

Framer was able to do it... answer hopefully coming soon

https://x.com/alexsafayan/status/1970165507325391227

[alexsafayan]

#2491