Outlet Component Exit Animation

[hhsl]

Hi, i'm trying to get my radix-ui component exit animation to run with framer-motion while routing. So far it works for initial animations. But as soon as I'm trying to unmount the components via routes, the exit animation will just not work.

https://stackoverflow.com/questions/74190609/exit-animations-with-animatepresence-framer-motion-and-createbrowserrouter-r hints at #8008 (comment) which kind of works for root Outlets. Whereas the modal behaves weird when mounted in nested Outlets, probably due to unsufficent or wrong keys on the outlet?! The outlet always seems to get unmounted instantly despite any efforts.

I've got this demonstration up and running https://stackblitz.com/edit/vitejs-vite-mgimkf?file=src%2FApp.tsx

The exit animation works in the second example by unmounting via react state and without routing. But I want routing to get the animation as well.

Maybe I'm missing something?