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

PropTypeDefaultDescription
childrenReact.ReactNode[]The content that the panel will transition through.
classNamestringOptional CSS class to apply to the panel container for additional styling.
transitionTransitionThe transition settings from framer-motion to control the animation effects.
activeIndexnumberThe index of the currently active child element to display.
variantsObject (with enter, center, exit properties)Variants for each animation state (enter, center, exit) to customize animations.
...motionPropsMotionPropsSpread all additional framer-motion props to the motion.div component.