How does it work with Motion?

[subproject22]

So I tried to use it similar way as Radix, but it's doesn't work

"use client"

import * as React from "react"
import { useState } from "react"

import { Tabs } from "@base-ui-components/react/tabs"
import { AnimatePresence, motion } from "motion/react"

export function NewTabsDemo() {
  const [active, setActive] = useState("one")
  return (
    <Tabs.Root value={active} onValueChange={setActive} defaultValue="one">
      <Tabs.List>
        <Tabs.Tab value="one">One</Tabs.Tab>
        <Tabs.Tab value="two">Two</Tabs.Tab>
        <Tabs.Tab value="three">Three</Tabs.Tab>
      </Tabs.List>

      <AnimatePresence mode="popLayout">
        {active === "one" && (
          <Tabs.Panel
            className="bg-red-500 p-12"
            value="one"
            keepMounted
            render={
              <motion.div
                initial={{
                  opacity: 0,
                  y: -100,
                }}
                animate={{
                  opacity: 1,
                  y: 0,
                }}
                exit={{
                  opacity: 0,
                  y: 100,
                }}
              />
            }
          >
            one
          </Tabs.Panel>
        )}

        {active === "two" && (
          <Tabs.Panel
            keepMounted
            className="bg-green-500 p-12"
            value="two"
            render={
              <motion.div
                initial={{
                  opacity: 0,
                  y: -100,
                }}
                animate={{
                  opacity: 1,
                  y: 0,
                }}
                exit={{
                  opacity: 0,
                  y: 100,
                }}
              />
            }
          >
            two
          </Tabs.Panel>
        )}

        {active === "three" && (
          <Tabs.Panel
            keepMounted
            className="bg-yellow-500 p-12"
            value="three"
            render={
              <motion.div
                initial={{
                  opacity: 0,
                  y: -100,
                }}
                animate={{
                  opacity: 1,
                  y: 0,
                }}
                exit={{
                  opacity: 0,
                  y: 100,
                }}
              />
            }
          >
            three
          </Tabs.Panel>
        )}
      </AnimatePresence>
    </Tabs.Root>
  )
}

I haven't found a single examples of usage with Motion.

[atomiks]

Hi @subproject22, in our next release the docs will be updated with some Motion examples but this mainly pertains to popup-related components, not ones like Tabs.

You can read the updated docs here - we can investigate Motion animations with Tabs soon though

[subproject22]

hey @atomiks thanks for response. As for my example with Tabs, adding key helps, but still can't make exit animation work.

[mj12albert]

Related to #1486

[mj12albert]

@subproject22 Just wondering if you've gotten Radix Tabs working well with motion, and if so are you able to share a sandbox or demo 🙏