Transition Panel

Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.

Examples

Tabs with Transition Panel

Refining Visual Harmony

Explore the principles of motion aesthetics that enhance the visual appeal of interfaces. Learn to balance timing, easing, and the flow of motion to create seamless user experiences.

Card with Transition Panel

Brand

Develop a distinctive brand identity with tailored logos and guidelines to ensure consistent messaging across all platforms.

Code

'use client';
import {
  AnimatePresence,
  Transition,
  Variant,
  motion,
  MotionProps,
} from 'framer-motion';
import { cn } from '@/lib/utils';

type TransitionPanelProps = {
  children: React.ReactNode[];
  className?: string;
  transition?: Transition;
  activeIndex: number;
  variants?: { enter: Variant; center: Variant; exit: Variant };
} & MotionProps;

export function TransitionPanel({
  children,
  className,
  transition,
  variants,
  activeIndex,
  ...motionProps
}: TransitionPanelProps) {
  return (
    <div className={cn('relative', className)}>
      <AnimatePresence
        initial={false}
        mode='popLayout'
        custom={motionProps.custom}
      >
        <motion.div
          key={activeIndex}
          variants={variants}
          transition={transition}
          initial='enter'
          animate='center'
          exit='exit'
          {...motionProps}
        >
          {children[activeIndex]}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

Please add:

Component API

Prop	Type	Description
children	React.ReactNode[]	The content that the panel will transition through.
className	string	Optional CSS class to apply to the panel container for additional styling.
transition	Transition	The transition settings from framer-motion to control the animation effects.
activeIndex	number	The index of the currently active child element to display.
variants	Object (with enter, center, exit properties)	Variants for each animation state (enter, center, exit) to customize animations.
...motionProps	MotionProps	Spread all additional framer-motion props to the motion.div component.