[BUG] AnimatePresence popLayout mode does not work within a shadow dom #2508
Labels
bug
Something isn't working
Comments
|
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. |
|
Bump too. Would love any workaround! |
|
I made a PR to fix this: #2830, works if I pass in the shadowRoot directly. |
|
@mattgperry can you help get this merged? |
|
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.
( |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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.The text was updated successfully, but these errors were encountered: