motiondivision
[BUG] AnimatePresence popLayout mode does not work within a shadow dom
Description
If we use AnimatePresence inside a shadow DOM, the popLayout features don't work. This is because we're unable to find the temporary styles added, because shadow dom won't apply styles found in document.head.
Code sandbox repro: https://codesandbox.io/p/sandbox/framer-motion-shadow-dom-f7gkk6?file=%2Fsrc%2FApp.js%3A89%2C2
4. Steps to reproduce
Steps to reproduce the behavior:
- Open the code sandbox link
- Click the example to run the animation. You'll notice the popLayout behavior is not occurring.
- Uncomment line 86, skipping the shadow DOM.
- popLayout starts working again.
Technical guess of the problem
From what I understand, popLayout works by applying a temporary class which positions an element as absolute during exit transition. This does not work in shadow DOMs due to the way the style is applied. I think the code here is adding the temporary class, but it's hardcoded to using document.head, which won't be available to the shadow dom.
That guess at the cause seems likely :(
If anyone has a workaround for this issue, please share 🙏
Wanted to bump this issue, currently experiencing it and would love to continue using framer motion in my project.
I made a PR to fix this: https://github.com/framer/motion/pull/2830, works if I pass in the shadowRoot directly. Would appreciate any feedback!
If anyone else needs this in the meantime, I made a tag with all the dist files included, so you can reference it directly from your package.json, i.e.
npm install 'https://gitpkg.vercel.app/tehbelinda/motion/packages/framer-motion?v11.11.10-shadow-dom' --save
(yarn add should work too but I haven't tested that one)