Headless UI + Auto-Animate | Issue with auto-animate conflicting
gkkirsch opened this issue · comments
Hey, first off. I love the simplicity of the auto-animate lib. Thank you.
I am having an issue with two different animation libs and was wondering if anyone could provide insight into why it might be happening.
The problem: (react, tailwind-css, headless-ui, auto-animate)
I am transitioning between each screen using the headless-ui component . The first screen works great.
I am using auto-animate on the Schedule Settings page. You can see that the headless-ui Transition doesn't work when i'm on that page. If i remove the useAutoAnimate hook from the Schedule Settings page the animations work again.
My initial guess is auto-animate is doing something to the dom that makes the other lib Headless-ui transitions not work.
I would love to use both libs.
Any ideas?
Here is the same problem in a codesandbox.
https://codesandbox.io/p/sandbox/wonderful-tristan-qjywrd
You will notice that the HI or HEY do not animate in. They animate out but not in. Just like in the gif
If you remove the ref to the auto-animate then it works.
Likely related: tailwindlabs/headlessui#3146
(Suggested workaround does not seem to work though.)