search

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://auto-animate.formkit.com
MIT License
11.96k stars 210 forks source link

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

Open gkkirsch opened 3 months ago

gkkirsch commented 3 months ago

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 commented 4 weeks ago

Likely related: https://github.com/tailwindlabs/headlessui/issues/3146

(Suggested workaround does not seem to work though.)