Transition Panel

Tab panels with directional slide transitions. AnimatePresence with a custom direction variant.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Transition PanelTab panels with directional slide transitions. AnimatePresence with a custom direction variant.

"use client";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

type TransitionPanelItem = { label: string; content: React.ReactNode };
type TransitionPanelProps = { items: TransitionPanelItem[] };

const panelVariants = {
  enter: (dir: number) => ({ opacity: 0, x: dir * 40 }),
  center: { opacity: 1, x: 0 },
  exit: (dir: number) => ({ opacity: 0, x: dir * -40 }),
};

export function TransitionPanel({ items }: TransitionPanelProps) {
  const [activeIdx, setActiveIdx] = useState(0);
  const [direction, setDirection] = useState(1);

  function select(i: number) {
    setDirection(i > activeIdx ? 1 : -1);
    setActiveIdx(i);
  }

  return (
    <div className="mp-transition-panel">
      <div className="mp-transition-panel-tabs">
        {items.map((item, i) => (
          <button
            key={i}
            className={"mp-transition-panel-tab" + (activeIdx === i ? " mp-transition-panel-tab--active" : "")}
            onClick={() => select(i)}
          >
            {item.label}
          </button>
        ))}
      </div>
      <div className="mp-transition-panel-body">
        <AnimatePresence mode="wait" custom={direction}>
          <motion.div
            key={activeIdx}
            custom={direction}
            variants={panelVariants}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{ duration: 0.22, ease: "easeOut" }}
            className="mp-transition-panel-pane"
          >
            {items[activeIdx].content}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
itemsrequired	{ label: string; content: ReactNode }[]	—	Tab items with labels and content