How to animate tab switch

[piszczu4]

Is it possible to animate tab switching so that the content from current tab fade out and the content from new one fade in?

[tyler-audio]

did you find a solution to this?

[markosmk]

is posible with tailwindcss, add class to TabContent

<TabsContent value="..." className="...">
     <div className="... animate-fade-left">
         ...
     </div>
</TabsContent>

and in your config tailwind, add extends like this:

theme: {
 extends: {
    ...,
      keyframes: {
        ...
        "fade-left": {
          "0%": {
            opacity: "0",
            transform: "translateX(2rem)"
          },
          "100%": {
            opacity: "1",
            transform: "translateX(0)"
          }
        }
      },
      animation: {
        "fade-left": "fade-left 0.2s ease"
      },

[PratikDev]

quick solution. thanks @markosmk

[imtanvir]

Thanks a lot, @markosmk . It's working 🤝

[lordtottuu]

Thank you for this!