Painfully broken animations on mobile (screen capture inside)

[FearlessSlug]

ShadcnUI is using tailwindcss-animate which has a bug with the animation lagging/bugging out on mobile devices both IOS and Android, this means that every single component that uses tailwindcss-animate lib has this broken animation in some form, it is most noticable (and most painful) in the sheet component like in the video as well as in the toast component also in the video.

It seems like in tailwindcss-animate repo there's an issue opened since last year with no plans on fixing this bug tailwindcss-animate/issues/47

https://github.com/shadcn-ui/ui/assets/134693517/8008cffc-bccb-40b6-803f-17a80e5ccd51

[devlzcode]

can't repro on ios, used both chrome and safari

[FearlessSlug]

can't repro on ios, used both chrome and safari

What version of iOS? I reproduced this on a couple of iOS 15.X iPhones...

[FearlessSlug]

I'm not sure if there's any plan to add more sophisticated (and heavier) libraries for animations so there's no point in making a PR to switch tailwindcss-animate for FramerMotion for these problematic components, so I'll put a couple of links that helped me replicate the same animation but with FramerMotion (IMO the animations turned out to be even smoother with FramerMotion on both desktop and mobile)

Toast:

• I followed this example I found online: https://codesandbox.io/p/sandbox/toast-imperative-notifications-8jfl32
• I had a lot of problems getting Framer to work with the current shadcn's toast management system, so I changed it to be similar to the one in the CodeSandBox above

Sheet:

• I followed this tutorial: https://www.solberg.is/radix-plus-framer-motion
• Keep in mind that you now need to manage the open state or at least listen to the Sheet's onOpenChange event and provide the current open state to the SheetContent component which is not a big deal IMO
• Another thing to keep in mind is that in the tutorial they set a query media so for mobile size the sheet would open from the bottom and on desktop it would open from the right, I converted that isMobile boolean to isBottom like so: const isBottom = side === "bottom"; (side is the variant of the sheet that already exists in the SheetContent component) so now the default side is right and I can also set it to bottom, I don't care for left or top so I didn't implement for those options but it's pretty easy and straightforward

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.