Modal animation not working with latest `motion`

[Gesma94]

Provide a general summary of the issue here

I tried to follow the documentation on how to use motion with react-aria-components here: https://react-spectrum.adobe.com/react-aria/styling.html#framer-motion

Unfortunately, things don't seem to work correctly. I've tried to reproduce the example in this stackblitz: https://stackblitz.com/edit/vitejs-vite-bvzcdn8s

As you can see from the demo, opacity style is not animated, and it remains to 0 even after have opened the Dialog

🤔 Expected Behavior?

Animation should be performed correctly

😯 Current Behavior

motion animation is not triggered

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

RAC doc: https://react-spectrum.adobe.com/react-aria/styling.html#framer-motion
Stackblitz link: https://stackblitz.com/edit/vitejs-vite-bvzcdn8s

Version

1.12.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Hmm, looks like there's a little blurb under that example:

Note: Framer Motion's AnimatePresence component may not work with React Aria overlays in all cases, so the example shown above is the recommended approach for exit animations.

I don't know if this is one of those cases. You could look instead at this example, maybe it's more complete?
https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html