unable to animate Tab.Panel

[ndimatteo]

Hey there! Loving Headless UI so far 🤘

I'm trying to use framer-motion with Tab.Panels, but it seems that the way headlessUI handles updating the active Tab.Panel does not play nice with framer-motion's AnimatePresence and exit animations.

Normally, you can add a key prop to motion components and if wrapped in AnimatePresence (with exitBeforeEnter) you can trigger exit animations when the component is removed from the dom.

This approach does not seem to work with headlessUI Tabs. For example, consider the following:

<Tab.Panels>
  <AnimatePresence exitBeforeEnter>
    {tabs.map((tab, key) => (
      <Tab.Panel key={key} as={m.div} initial="hide" animate="show" exit="hide" variants={fadeAnimation}>...</Tab.Panel>
    )}
  </AnimatePresence>
</Tab.Panels>

const fadeAnimation = {
  show: {
    opacity: 1,
    transition: {
      duration: 0.2,
      ease: 'linear',
      when: 'beforeChildren',
    },
  },
  hide: {
    opacity: 0,
    transition: {
      duration: 0.2,
      ease: 'linear',
      when: 'beforeChildren',
    },
  },
}

But when changing tabs the outgoing Tab.Panel disappears abruptly, while the newly selected Tab.Panel animates in properly.

I've tried several other combinations, like:

1. Rendering the Tab.Panel as a Fragment and setting up the motion component within that
2. Moving AnimatePresence outside of the Tab.Panels wrapper component
3. Using the selectedIndex renderProp to show/hide the motion div
4. Adding manual to Tab.Group and utilizing onChange to control the selected index

Nothing has worked! The closest I was able to get caused the outgoing motion div (Tab.Panel) to abruptly hydrate with the newly selected tab data while it was animating out.

Has anyone successfully been able to handle enter/exit transitions with Tabs? Really feel like this is a huge limitation here, in an otherwise lovely library!

[eakl]

Same issue with Popover. Unable to handle exit animations

[ndimatteo]

I actually found a solution that worked recently, forgot I had posted about this! Here's how I solved to get framer motion enter/exit animations working with Headless UI's Tab.Panel:

const Tabs = () => {
  const [tabIndex, setTabIndex] = React.useState(0)

  return (
    <Tab.Group
      selectedIndex={tabIndex}
      onChange={(index) => setTabIndex(index)}
      manual
    >
      <Tab.List>
        {tabs.map((tab, key) => (
          <Tab key={key} as={React.Fragment}>
            {/* Tab button here... */}
          </Tab>
        ))}
      </Tab.List>

      <Tab.Panels>
        <AnimatePresence exitBeforeEnter>
          <Tab.Panel
            key={tabIndex}
            as={m.div}
            initial="hide"
            animate="show"
            exit="hide"
            variants={tabAnim}
            static
          >
            {/* Selected tab content here... */}
          </Tab.Panel>
        </AnimatePresence>
      </Tab.Panels>
    </Tab.Group>
  )
}

Here's the framer motion variant for context:

const tabAnim = {
  hide: {
    opacity: 0,
    transition: {
      duration: 0.2,
      ease: 'linear',
      when: 'beforeChildren',
    },
  },
  show: {
    opacity: 1,
    transition: {
      duration: 0.2,
      ease: 'linear',
      when: 'beforeChildren',
    },
  },
}

[Adrianwritenow]

Set static={true} in <Tab.panel> the component /view wont be removed and can be transitioned in.

[fibonacid]

Here is a solution for the latest version of headless ui and framer motion:

import { Tab } from "@headlessui/react";
import { AnimatePresence, motion, type Variants } from "framer-motion";
import { useState } from "react";

export default function PanelContent() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </Tab.List>
      <Tab.Panels>
        <AnimatePresence
          mode="wait" // let the exit animation finish before removing the element
          initial={false} // avoid animating on first render (optional)
        >
          {selectedIndex === 0 && (
            <MotionTabPanel key={selectedIndex}>Tab 1 Content</MotionTabPanel>
          )}
          {selectedIndex === 1 && (
            <MotionTabPanel key={selectedIndex}>Tab 2 Content</MotionTabPanel>
          )}
        </AnimatePresence>
      </Tab.Panels>
    </Tab.Group>
  );
}

const variants: Variants = {
  visible: {
    opacity: 1,
    transition: { duration: 0.3, delay: 0.5, ease: "easeOut" },
  },
  hidden: {
    opacity: 0,
    transition: {
      duration: 0.3,
      ease: "easeOut",
    },
  },
};

function MotionTabPanel({ children }: { children: React.ReactNode }) {
  return (
    <Tab.Panel
      as={motion.div}
      variants={variants}
      initial="hidden"
      animate="visible"
      exit="hidden"
      static // tells headless ui to delegate mount/unmount to us
    >
      {children}
    </Tab.Panel>
  );
}