Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Headless UI + Auto-Animate | Issue with auto-animate conflicting #197

Open
gkkirsch opened this issue Mar 7, 2024 · 1 comment
Open

Comments

@gkkirsch
Copy link

gkkirsch commented Mar 7, 2024

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?
animation (1)

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.

@DamianGlowala
Copy link

DamianGlowala commented Jun 5, 2024

Likely related: tailwindlabs/headlessui#3146

(Suggested workaround does not seem to work though.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants